vue父子组件的种通信方式

最新推荐文章于 2025-11-13 12:19:08 发布

原创最新推荐文章于 2025-11-13 12:19:08 发布 · 379 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 专栏收录该内容

0 篇文章

订阅专栏

本文详细探讨了Vue中父子组件的通信方式，包括使用props进行父向子的单向数据传递，以及通过$emit实现子向父的事件通知。同时，还介绍了如何利用$children和$parent在组件间建立直接的引用关系，但需谨慎处理边界情况和数组与对象的区别。

组件关系

A，B、A，C、B，D、C，E父子组件，B，C兄弟组件，A，D、A，E隔代关系，D，E堂兄关系

父子组件之间的通信
非父子组件之间的通信

一、props/$emit

1.父组件向子组件传值

//父组件
<template>
  <div class="section">
    <com-flower :flower="flowerList"></com-flower> //:flower用来传递数据给子组件
  </div>
</template>

<script>
import comFlower from './test/flower.vue'
export default {
  name: 'Home',
  components: { comFlower },
  data() {
    return {
      flowerList: ['菊花', '兰花', '梅花']
    }
  }
}
</script>

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

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

props是单向传递，父组件通过v-bind绑定数据到html，子组件中用props获取父组件绑定到子组件上的数据，而且prop只读，不可被修改

2. 子组件向父组件传值

// 父组件中
<template>
  <div class="section">
    <com-flower :flower="flowerList" @onEmitIndex="onEmitIndex"></com-article>
    <p>{{currentIndex}}</p>
  </div>
</template>

<script>
import comFlower from './test/flower.vue'
export default {
  name: 'Home',
  components: { comFlower },
  data() {
    return {
      currentIndex: -1,
      flowerList: ['菊花', '兰花', '梅花']
    }
  },
  methods: {
    onEmitIndex(idx) {
      this.currentIndex = idx
    }
  }
}
</script>

//子组件
<template>
  <div>
    <div v-for="(item, index) in flower" :key="index" @click="emitIndex(index)">{{item}}</div>
  </div>
</template>

<script>
export default {
  props: ['flower'],
  methods: {
    emitIndex(index) {
      this.$emit('onEmitIndex', index)
    }
  }
}
</script>

$emit绑定自定义事件，事件被执行的时候会将参数传给父组件，父组件通过v-on监听并接收参数。

二、$children/$parent

// 父组件中
<template>
  <div class="hello_world">
    <div>{{msg}}</div>
    <com-a></com-a>
    <button @click="changeA">点击改变子组件值</button>
  </div>
</template>

<script>
import ComA from './test/comA.vue'
export default {
  name: 'HelloWorld',
  components: { ComA },
  data() {
    return {
      msg: 'Welcome'
    }
  },

  methods: {
    changeA() {
      // 获取到子组件A
      this.$children[0].messageA = 'this is new value'
    }
  }
}
</script>

// 子组件中
<template>
  <div class="com_a">
    <span>{{messageA}}</span>
    <p>获取父组件的值为:  {{parentVal}}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      messageA: 'this is old'
    }
  },
  computed:{
    parentVal(){
      return this.$parent.msg;
    }
  }
}
</script>

指定已创建的实例的父组例，子实例用this.$parent访问父实例，子实例被推入父实例的$children数组中，主要目的作为访问组件之间的应急方法。

要注意边界情况，如在#app上拿$parent得到的是new Vue()的实例，在这实例上再拿$parent得到的是undefined，而在最底层的子组件拿$children是个空数组。也要注意得到$parent和$children的值不一样，$children 的值是数组，而$parent是个对象。