在使用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
// 通过这种方式可以获取到子组件的方法