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

博客地址：https://fisher-zh.github.io

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

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

<child message="hello!"></child>

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

在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)
    }
  }
})

<child @change="changeEvent" message="hello!"></child>
<!-- 在绑定事件的过程中，changeEvent方法并不需要传入参数，在之后使用的时候传入参数即可 -->

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

<child ref="child" @change="changeEvent" message="hello!"></child>

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

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

猜你喜欢