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'
后续参数是 需要传递的值
