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

前言：
父组件单向向子组件传递参数。

1.创建Vue实例：

• num为等下要传递的

 const app = new Vue({
        el: "#app",
        data: {
            num: 66
        },
    });

2.添加全局组件：

 Vue.component("hello",{   //定义组件名称
        template: "<button @click='numtest++'>我是子组件：{{numtest}}</button>",
        props: {
            numtest: {     //自定义名称
                type: Number,    //筛选父组件传递的类型
                default: 0,  //如果父组件没传值默认为0
            },
            numtest2: {   //可以传递多个
                type: Number,
                default: 0,
            }
            
        }
    });

3.html模板代码：

<div id="app">
        <hello :numtest="num"></hello>  //使用v-bind获取num的值，并赋予numtest
</div>

4.运行代码：

• 可以看到成功传值。
  
• 但是我们可以看到，子组件数据改变后，父组件的数据并不会改变。
  
• 所以我们就需要子向父通信（见下一章）。