1.先直接看下 v3咋写的

1.子组件的写法和v2是一样的
2.update事件后面跟上传递的属性名
3.第二个参数是 传的值

1.父组件使用方式和以前不一样了 文末有v2的用法自行对比
2.这必须使用 v-model指令 冒号: 跟上属性的名字
3.后面赋值还是一样的
4.需要注意的是这种写法 在vscode里面语法检查会报错,这个不用管,因为这块的语法ESlint没有更新,但是不会影响运行的

 
父组件数据: {{num}}

2.接着回顾下v2父子组件的2种简洁写法

2.1 v-model

父组件内使用子组件

子组件

    Vue.component("btn",{props:["value"],template:`
按钮 {{value}}   
`})

v-model 相当于
1.父组件绑定input事件
2.value绑定输入框的值

3.所以 可以通过父组件使用v-model指令 代替绑定值和事件
4.子组件直接通过 $emit()触发input事件

2.2 sync语法糖

父组件 属性.sync=变量

子组件

   Vue.component("btn2",{props:["num"],template:`
按钮 {{num}}   
`})

子组件通过 $emit()触发update事件
事件后面跟上 传递的属性'update:num'
后续参数是 需要传递的值