浅聊一下
在vue项目中，我们经常会用到组件来进行模块化开发，当我们将一个页面拆分成多个组件时，要实现各个组件间的数据互通，那该怎么办呢？本篇文章将带大家掌握如何进行组件通信…
准备
我们先使用cli创建一个vue脚手架，在Dos下输入
- vue create 文件名
- 让我们选择用vue2还是vue3，我们选择都用，选择第三个
- 选择要使用的工具
- 一直回车，创建成功
组件通信
父子通信
我们先来看父组件是如何向子组件中传值的
我们来完成一个功能，在input框中输入值，保存在lists数组中，然后在下面用ul li列出lists数组
将lists做成组件
在Vue.js中，父组件向子组件传递数据主要通过props属性来实现。Props是一种用于从父组件向子组件传递数据的机制。以下是一个简单的例子，展示了父组件向子组件传递数据的过程。
App.vue
<template>
<div>
<div class="head">
<input type="text" name="" v-model="message">
<button @click="submit">确定</button>
</div>
<List :lists="lists"/>
</div>
</template>
<script>
import List from '@/components/body1/List.vue'
export default {
components: {
List
},
watch:{
lists(newVal){
console.log(newVal);
}
},
data() {
return {
lists: ['html', 'css'],
message: ''
}
},
methods: {
submit() {
if (!this.message) return
this.lists.push(this.message)
this.message = ''
}
}
}
</script>
<style lang="less" scoped></style>
List.vue
<template>
<div class="body">
<ul>
<li v-for="(item,index) in lists" :key="index">{{ item }}</li>
</ul>
<button @click="changeProps">修改props</button>
</div>
</template>
<script>
export default {
props:['lists'],
data(){
return{
}
},
methods:{
changeProps(){
this.lists[0] = 'HTML'
}
}
}
</script>
<style lang="css" scoped>
</style>
当父组件的值要传给子组件的时候，只需要在组件上用v-bind绑定要传递的值
<List :lists="lists"/>
在List.vue中，我们该怎么引入父组件中传入的值呢？
我们使用props来引入，我们可以将父组件传入的值以数组方式引入
props:['lists'],
这样就实现了父子传值啦！
子父通信
我们再来看子组件是如何实现向父组件传递数据的
Head.vue
<template>
<div>
<div class="head">
<input type="text" name="" v-model="message">
<button @click="submit">确定</button>
</div>
</div>
</template>
<script>
export default {
data(){
return {
message:''
}
},
methods:{
submit(){
if(!this.message) return
// this.lists.push(this.message)
// 将message传给父组件使用
this.$emit('add',this.message)
this.message=''
}
}
}
</script>
<style lang="less" scoped>
</style>
在这里，我们数据源中有一个数据message，当我们按下确定按钮时，将message发送给父组件，掘友们应该发现在submit方法中有一个$emit,我们就用他来向父组件传值，add是我们的订阅名，父组件通过订阅这个名字来获取数据，将message传给父组件
<template>
<Head @add="handle"/>
<div class="body">
<ul>
<li v-for="(item,index) in lists" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
import Head from '@/components/body2/Head.vue'
export default {
components:{
Head
},
data(){
return {
lists:['html','css'],
}
},
methods:{
handle(val){
// console.log(val);
this.lists.push(val)
}
}
}
</script>
<style lang="less" scoped>
</style>
我们只需要在Head组件上订阅一下，取名为add，如果add触发，则调用handle方法将传递过来的值导入数组中
<Head @add="handle"/>
子子传值
我们在前面学习了如何进行父子通信和子父通信，那么该如何子子通信呢？其实最聪明的掘友可以想到，子将值传给父，父再将值传给子不就好了吗？没错这样做也可以进行值的传递，但是你有没有想过，如果是子组件的子组件，和另外一个子组件的子组件通信呢？
那么这里就需要用到我们的vuex
vuex
Vuex 是 Vue.js 的状态管理库，用于管理应用程序的状态。它提供了一个集中化的状态存储仓库，以及一些规则确保状态只能按照一定方式进行修改。
下面就是我们的仓库，state就是仓库的数据源，mutation是方法，我们在数据源里添加了一个lists，方法里增添了向lists里添加值的方法
import { createStore } from "vuex"
const store = createStore({
state() { // data
return {
lists: ['html', 'css', 'js']
}
},
mutations:{//methods
listsAdd(state,val){
state.lists.push(val)
}
}
})
export default store
那在子组件中我们该如何引入呢？
引入数据源：
import { mapState } from 'vuex'
export default {
computed:mapState(['lists'])
}
引入方法：
import { mapMutations } from 'vuex'
export default {
data(){
return {
message:''
}
},
methods:{
submit(){
this.listsAdd(this.message)
},
...mapMutations(['listsAdd'])
}
}
在引入以后，就把他们当成自己的数据来使用就好啦！
同样可以起作用~~
结尾
总的来说，Vue.js组件通信是构建复杂应用中不可或缺的一部分。在本文中，我们深入研究了父组件向子组件传值的实际案例，并介绍了Vue.js中常用的组件通信方式。
通过props属性，我们能够将数据从父组件传递到子组件，实现了单向数据流。这种简单而直观的数据传递方式使得组件之间的关系清晰明了，易于维护和理解。
然而，在大型应用中，为了更好地管理和共享状态，引入了Vuex这样的状态管理库。Vuex提供了一种集中化的状态管理方式，使得不同组件之间可以共享和响应相同的状态，进而实现更加复杂的应用逻辑。
总体而言，合理运用Vue.js的组件通信机制，包括props、自定义事件、Vuex等，能够提高应用的可维护性和扩展性。通过深入了解这些机制，开发者可以更加灵活地构建出符合需求的前端应用，为用户提供更好的体验。希望本文能够帮助你更好地理解和运用Vue.js组件通信，提高你的Vue.js开发技能。
原文链接：https://juejin.cn/post/7314519123178045452 作者：滚去睡觉
