vue2

父组件

<DomDialog v-model="isDomDialog"></DomDialog>
//同
<DomDialog v-bind:value="isDomDialog" v-on:input="isDomDialog=$event"></DomDialog>

子组件

props:{ 
value:{type: Boolean,
},
},
data(){ return { 
dialogVisible:false, 
} }, 
watch:{ value(val){ this.dialogVisible = val
},
},
methods: {
// 关闭弹窗触发 confrim(){ 
this.$emit('input',false) // 通过 this.$emit() 向父组件传值 }
},

  

vue3

<!-- 父组件 -->
//vue3绑定v-model:
//子组件的inpVal的值 同步 父组件的value值
//trim为修饰符号  非必要  用于去除首尾空格
<div id="app">
    <my-input v-model:inpVal.trim="value" />
</div>



<!-- 子组件 -->
<template>
  <div class="my-input">
    <input type="text" :value="inpVal" @input="handelInput" />
    <p>value: {{ inpVal }}</p>
  </div>
</template>

<script>
import { onMounted } from "vue";
export default {
  props: ["inpVal", "inpValModifiers"],
  setup(props, ctx) {
    const printModifiers = () => {
      console.log(props.inpValModifiers);
    };
    const handelInput = (e) => {
      ctx.emit("update:inpVal", e.target.value);
    };
    onMounted(printModifiers);
    return {
      printModifiers,
      handelInput
    };
  },
};
</script>

<template>
  <div class="my-input">
    <input type="text" :value="inpVal" @input="handelInput" />
    <p>value: {{ inpVal }}</p>
  </div>
</template>
//vue3 setup写法
<script setup>
import { onMounted,defineProps} from "vue";
const props = defineProps({
  inpVal:{type:String,default:100},
  inpValModifiers:{type:String,default:200},
})
function   printModifiers(){
      console.log(props.inpValModifiers);
    };
 function handelInput(e){ 
  emit("update:inpVal", e.target.value);
    };
const emit = defineEmits([ 'update:inpVal' ])    
    onMounted(printModifiers)

</script>

vue3写法watch必写部分

对外暴露绑定的属性
const props = defineProps({
  value: {
    type    : Array,
    required: true,
    default : () => []
  },})

//中转将传入的属性改为可以修改的本组件的data
const imageArr = ref(props.value)

监听对外暴露的属性  修改data
//第一步传入值发生变化
watch(() => props.value, () => {
  //赋值data内的值
  imageArr.value = props.value
})

//声明子传父事件
const emit = defineEmits([ 'update:value' ])

watch(() => [ ...imageArr.value ], () => {
  emit('update:value', imageArr.value)
})

vue3写法总结下

 <input type="text" :value="inpVal" @input="handelInput" />
 const handelInput = (e) => {
       //update 后面什么名字随意同步父组件那的名字
      ctx.emit("update:inpVal", e.target.value);
    };
    
    
   <!-- 父组件 -->
//vue3绑定v-model:
//子组件的inpVal的值 同步 父组件的value
<div id="app">
model后面的名字看子组件emit后事件的名字
    <my-input v-model:inpVal="value" />
</div>