vue.js学习笔记（三）--父子组件通信总结

忘是亡心i 2022-06-12 14:26 198阅读 0赞

> 博客地址：[https://fisher-zh.github.io][https_fisher-zh.github.io]

在使用Vue的过程中，如果需要进行父子组件间的通信，通过查阅[官方文档][Link 1]  
我们可以了解到只需要在子组件要显式地用 [props选项][props]声明它期待获得的数据，同时在其使用过程中传入相应的数据即可，例如：

Vue.component('child', {
      // 声明 props
      props: ['message'],
      // 就像 data 一样，prop 可以用在模板内
      // 同样也可以在 vm 实例中像“this.message”这样使用
      template: '<span>{ { message }}</span>'
    })

当然，这只是一个简单的例子，在实际的使用过程中，我们还可以在子组件中声明传入数据的类型和默认值，这些不展开讲解，查阅官方文档均可以找到满意的答案。

在vue中，prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。所以如果我们在子组件中想要传递给父组件某些信息的话，我们就需要用到另一种方法——vm.$emit

Vue.component('child', {
      // 声明 props
      props: ['message'],
      // 就像 data 一样，prop 可以用在模板内
      // 同样也可以在 vm 实例中像“this.message”这样使用
      template: '<span>{ { message }}</span>',
      methods: {
        triggerEvent() {
          // 传入事件名和需要传递的参数
          this.$emit('eventName', args)
        }
      }
    })

以上均为较常见的方法，在官方的文档中也有比较详尽的介绍。但是在之前的使用过程中，我需要在父组件中触发子组件的某个方法，这时候需要怎么做呢？在查阅文档的过程中并没有找到行之有效的办法，之后通过查阅资料发现我们可以通[ref][]为子组件指定一个索引，之后通过索引获取子组件的事件，例：

this.$refs.child.childEventName
    // 通过这种方式可以获取到子组件的方法

[https_fisher-zh.github.io]: https://fisher-zh.github.io
[Link 1]: https://cn.vuejs.org/v2/guide
[props]: https://cn.vuejs.org/v2/api/#props
[ref]: https://cn.vuejs.org/v2/guide/components.html#子组件索引