Vue教程17:组件间通信之一:通过组件实例通信
chencl1986 opened this issue · 0 comments
chencl1986 commented
阅读更多系列文章请访问我的GitHub博客,示例代码请访问这里。
该节教程代码可通过npm start运行devServer,在http://localhost:8080/查看效果
父级获取子级实例实现通信
代码示例:/lesson17/src/components/parent.js,/lesson17/src/components/child.js
在父组件引用子组件时,给子组件设置ref="child"属性,父组件就可以通过this.$refs.child获取到子组件实例。
此时父组件就可以通过直接修改子组件的属性this.$refs.child.num1++,或者调用子组件方法this.$refs.child.add(),实现子组件属性变化。
子级获取父级实例实现通信
代码示例:/lesson17/src/components/parent.js,/lesson17/src/components/child.js
父组件将实例this,通过props属性parent传递给子组件。
此时子组件就可以通过直接修改父组件的属性this.parent.num1++,或者调用子组件方法this.parent.add(),实现子组件属性变化。
parent组件代码:
export default Vue.component('parent', {
data() {
return {
num1: 0,
num2: 0,
};
},
components: {
Child
},
methods: {
add() {
this.num2++
},
addChild1() {
this.$refs.child.num1++
},
addChild2() {
this.$refs.child.add()
},
},
template: `
<div>
<div>父级
num1:{{num1}}
num2:{{num2}}
<br/><input type="button" value="子级num1 +1" @click="addChild1" /><br/><input type="button" value="子级num2 +1" @click="addChild2" /></div>
<child ref="child" :parent="this"></child>
</div>
`
});
child组件代码:
export default Vue.component('parent', {
props: ['parent'],
data() {
return {
num1: 0,
num2: 0,
};
},
methods: {
add() {
this.num2++
},
addParent1() {
this.parent.num1++
},
addParent2() {
this.parent.add()
},
},
template: `
<div>
子级
num1:{{num1}}
num2:{{num2}}
<br/><input type="button" value="父级num1 +1" @click="addParent1" />
<br/><input type="button" value="父级num2 +1" @click="addParent2" />
</div>
`
});