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.运行代码：

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