vue组件通信的八种方式

一、props / $emit

父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。

1. 父组件向子组件传值

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

在这里插入代码片
// section父组件
<template>
 <div class="section">
 //子组件元素--插入
 <com-article :articles="articleList"></com-article>
 </div>
</template>
 
<script>
import comArticle from './test/article.vue' //引入子组件
export default {
   
 name: 'HelloWorld',
 components: {
    comArticle },
 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>

总结: prop 只可以从上一级组件传递到下一级组件（父子组件），即所谓的单向数据流。而且 prop 只读，不可被修改，所有修改都会失效并警告。

2. 子组件向父组件传值

对于$emit 我自己的理解是这样的: $emit绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。 通过一个例子，说明子组件如何向父组件传递数据。
在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标

在这里插入代码片
// 父组件中
<template>
 <div class="section">
 <com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
 <p>{
   {
   currentIndex}}</p>
 </div>
</template>
 
<script>
import comArticle from './test/article.vue'
export default {
   
 name: 'HelloWorld',
 components: {
    comArticle },
 data() {
   
 return {
   
 currentIndex: -1,
 articleList: ['红楼梦', '西游记', '三国演义']
 }
 },
 methods: {
   
 onEmitIndex(idx) {
   
 this.currentIndex = idx
 }
 }
}
</script>

在这里插入代码片
<template>
 <div>
 <div v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{
   {
   item}}</div>
 </div>
</template>
 
<script>
export default {
   
 props: ['articles'],
 methods: {
   
 emitIndex(index) {
   
 this.$emit('onEmitIndex', index)
 }
 }
}
</script>

二、 $children / $parent

使用前提是指定已建立父子关系，子实例可以用this.$parent访问父实例，子实例被推入父实例的$children数组中
注意：节制使用$parent和$children 它们主要的目的是作为访问组件的应急方法。更推荐用props和events实现父子组件的通信

在这里插入代码片
// 父组件中
<<