526互联

v-model 和 .sync

发布时间 2023-03-23 20:05:15作者: 糖锡

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')