Vue学习笔记16-组件之子向父通信

前言：
父向子通信，我们可以让子组件的初始值从父组件那里获取，那么子向父通信呢？其实就是让子和父做的动作一样即可

1.首先我们创建Vue实例：

• 添加方法addOne

const app = new Vue({
el: "#app",
data: {
num: 66
},
methods: {
addOne(){
this.num++;
}
}
});

2.然后我们就可以在组件里面调用改方法：

• 这个@add的事件就需要写在组件里面。

<div id="app">
<hello :numtest="num" @add="addOne()"></hello>
</div>

3.组件代码：

Vue.component("hello",{
//template代码里面调用组件里的方法
template: "<button @click='sonAdd'>我是子组件：{{numtest}}   </button>",
props: {
numtest: {
type: Number,
default: 0,
}
},
methods: {
sonAdd(){
this.$emit("add");    //事件名称
}
}
});

4.运行代码：

• 父子组件数据成功同步。

• 点赞
• 收藏
• 分享
• 文章举报