一文掌握Vue组件的通信方法(上)

---

Vue组件中的六种通信方式(上)

一、父组件传数据子组件

父组件传子组件原理是使用属性绑定,然后子组件通过props接收

下面通过一个例子说明父组件如何向子组件传递数据：在子组件article.vue中如何获取父组件section.vue中的数据articles:[‘红楼梦’, ‘西游记’,‘三国演义’]

// section父组件
<template>
  <div class="section">
    <Article :articles="articleList"></Article>
  </div>
</template>

<script>
import Article from './test/article.vue'
export default {
  name: 'HelloWorld',
  components: { Article },
  data() {
    return {
      articleList: ['红楼梦', '西游记', '三国演义']
    }
  }
}
</script>

// 子组件 article.vue
<template>
  <div>
    <span v-for="(item, index) in articles" :key="index">{{item}}</span>
  </div>
</template>

<script>
export default {
  props: ['articles']  
}
</script>

二、子组件传父组件

备注:props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告

子组件传父组件原理是通过事件绑定来实现

代码如下（示例）：

// section父组件
<template>
  <div class="section">
    <Article 
  	:articles="articleList"	
	@addArticleList = "fn"
></Article>
  </div>
</template>

<script>
import Article from './test/article.vue'
export default {
  name: 'App',
  components: { Article },
  data() {
    return {
      articleList: ['红楼梦', '西游记', '三国演义']
    }
  },
  methods:{
    fn(value){
      	this.articleList.push(value)
    }
  }
 
}
</script>

// 子组件 article.vue
<template>
  <div>
    <span v-for="(item, index) in articles" :key="index">{{item}}</span>
	<input type="text" v-model="bookName" />
	<button  @click="addBook">添加一个书名</button>
	
  </div>
</template>

<script>
export default {
  	props: ['articles'] ,
    data() { return { bookName: "", }},
    methods:{
      addBook(){
        this.$emit("addArticleList",this.bookName)
      }
    }
}
</script>

三.全局事件总线

全局事件总线原理也是事件绑定

第一步:在main.js中在vue的原型对象上挂载一个$bus(可以自己任意命名)属性,其值为vue的实例对象

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
  el: "#app",
  render: h => h(App),
  // 安装全局事件总线(在数据代理前)
  beforeCreate() {
    Vue.prototype.$bus = this
  }
})

第二步 传值和接收

一个组件想要获取其他组件数据步骤
具体步骤如下代码所示:

• 在created()生命周期函数中,通过全局事件总线对象来绑定事件

created(){
	this.$bus.$on("handler",(a,b,....args)=>{		// handler 是函数名 自定义 
		// 回调用函数可以接收其他组件传回的参数
		// 然后接收回来参数,实现自己需求的业务逻辑
	})
}

另外一个组件传值的步骤

• 在合适的事件触发handler函数,必须按钮的点击事件…
• 具体触发代码:

// 要求handler和 $on中绑定函数名一致
this.$bus.$emit("handler",param1,param2.....)