v-model 和 .sync

v-model的本质是父子组件间的通讯，父组件给子组件传递一个value自定义属性和input自定义事件；子组件接收value 并触发自定义事件修改value

 父组件中

        <Child v-model="visible"></Child>

        <Child :value="visible" @input="visible = $event.target.value"></Child>

        子组件中接收的两种方式

        1）

        props: {

            value: {

                type: Boolean,

                default: false

            }

        }

        关闭弹窗 this.$emit('input', false)

        模版里面使用的变量是value

        <div

            class="dialog-wrapper"

            ref="dialogWrapper"

            v-show="value"

            @click.self="closeDialog4Modal"

            :style="{ background: !modal ? 'transparent' : '' }"

        >

        2)

        name: 'Dialog',

        model: {

            prop: 'visible', // 使用visible代替原来的value

            event: 'input' // 自定义emit触发的事件需和这个事件名保持一致

        },

        props: {

            visible: {

                type: Boolean,

                default: false

            }

        }

        模版里面使用的话 就是visible

        <div

            class="dialog-wrapper"

            ref="dialogWrapper"

            v-show="visible"

            @click.self="closeDialog4Modal"

            :style="{ background: !modal ? 'transparent' : '' }"

        >

　　.sync

父组件中
<Child :visible.sync="visible"></Child>

子组件中emit触发事件

this.$emit('update:visible', false);

　vue3.0中舍弃了.sync 只保留了 v-model 并且可以绑定多个v-model

父组件中 
<Child v-model="price" v-model:username="username"></Child>

   子组件中

    <script setup>

       const props = defineProps({

           modelValue: {

             type: Number,

            },

            username: {

              type: String,

              default: ''

            }

          })

       const emits = defineEmits(['update: modelValue', 'update: username'])

     </script>

            <div

                class="dialog-wrapper"

                ref="dialogWrapper"

                v-show="modelValue"

                @click.self="closeDialog4Modal"

                :style="{ background: !modal ? 'transparent' : '' }"

            >

          事件触发是 emit('update:modelValue', 2000)

                   emit('update:username', 'jk')