1.前言
1.最近在搞
v3的时候那些和v2典型的区别组合式API什么的都没啥大问题,但是遇到了父子组件通信的一些简洁写法的区别,记录如下
2.先直接看下 v3咋写的
1.子组件的写法和v2是一样的
2.
update事件后面跟上传递的属性名3.第二个参数是 传的值
<template> <div> <button @click="$emit('update:num',num+1)">子组件修改:{{num}}</button> </div> </template> <script> export default { props:["num"] } </script>
1.父组件使用方式和以前不一样了 文末有
v2的用法自行对比2.这必须使用
v-model指令 冒号:跟上属性的名字3.后面赋值还是一样的
4.需要注意的是这种写法 在
vscode里面语法检查会报错,这个不用管,因为这块的语法ESlint没有更新,但是不会影响运行的
<h1>父组件数据: {{num}}</h1> <msg-skill v-model:num="num"></msg-skill>
3.接着回顾下v2父子组件的2种简洁写法
3.1 v-model
父组件内使用子组件
<btn v-model="num"></btn>
子组件
Vue.component("btn",{ props:["value"], template:` <div> <button @click="$emit('input',value+1)">按钮 {{value}}</button> </div> ` })
v-model 相当于
1.父组件绑定input事件
2.value绑定输入框的值
<btn :value="value " @input="value = $event.target.value "></btn>
3.所以 可以通过父组件使用
v-model指令 代替绑定值和事件4.子组件直接通过
$emit()触发input事件
3.2 sync语法糖
父组件 属性.sync=变量
<btn2 :num.sync="num" ></btn2>
子组件
Vue.component("btn2",{ props:["num"], template:` <div> <button @click="$emit('update:num',num+1)">按钮 {{num}}</button> </div> ` })
子组件通过
$emit()触发update事件事件后面跟上 传递的属性
'update:num'后续参数是 需要传递的值
