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

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉