vue3.x专题八 ---- v-model语法糖，父组件传值子组件，子组件更改父组件值的总结

今天来总结一下vue3.x中父组件中引用子组件时，给子组件使用 v-model 语法糖的用法，下面来看具体案例代码：

父组件：

<template>
      <!-- 如果你想获取原生事件事件对象 -->
    <!-- 如果绑定事函数 fn fn(e){ // e 就是事件对象 } -->
    <!-- 如果绑定的是js表达式  此时提供一个默认的变量 $event -->
    <h1 @click="$event.target.style.color='red'">父组件 {{count}}</h1>
    <hr>
    <br>
    <br>
    <br>
    <br>
    <!-- 如果你想获取自定义事件  -->
    <!-- 如果绑定事函数 fn fn(data){ // data 触发自定义事件的传参 } -->
    <!-- 如果绑定的是js表达式  此时 $event代表触发自定义事件的传参 -->
    <!-- <son-test-vue :modelValue="count" @update:modelValue="count=$event"></son-test-vue> -->
    <!-- 上一行代码可以简写为下面的代码 -->
    <son-test-vue v-model="count"></son-test-vue>
</template>

<script>
import SonTestVue from './SonTest.vue'
import { ref } from 'vue'
    export default {
        components:{
            SonTestVue
        },
        setup() {
           const count = ref(10) 
           return {
            count
           }
        }
    }
</script>

<style scoped>

</style>

子组件：yishang

<template>
    <div>
        子组件{{ modelValue }}
    </div>
    <br>
    <br>
    <br>
    <br>
    <button @click="updateCount">
        更新
    </button>

</template>

<script>
    export default {
        props:{
            modelValue:Number
        },
        setup(props,{emit}) {
            const updateCount = () => {
                emit("update:modelValue",666)
            }
            return {
                updateCount
            }
        }
    }
</script>

<style scoped>

</style>

以上就是父组件传值子组件，子组件修改父组件值在vue3.x的简单用法。