uni-app 子组件v-model的双向绑定

最新推荐文章于 2024-09-03 17:56:55 发布

邯郸达文西

最新推荐文章于 2024-09-03 17:56:55 发布

阅读量1.1k

点赞数 1

文章标签： uni-app 前端 javascript

本文链接：https://blog.csdn.net/weixin_45881304/article/details/129405163

版权

文章探讨了Vue框架在2.0和3.0版本中，父子组件间使用v-model进行双向数据绑定的不同实现方式。在Vue2.0中，v-model是:value和@input的语法糖，而在Vue3.0中，更新为`update:modelValue`事件。子组件通过修改props并触发相应事件来更新父组件的状态。

摘要由CSDN通过智能技术生成

vue2.0

父组件
   <!-- v-model实际上就是:value和@input的语法糖 -->
   <!-- 双向绑定多个属性的时候可以使用.sync关键字 -->
<template>
        <drag-image v-model="imgArr"></drag-image>
</template>


子组件
<script>
emits:['input']
 props: {
     <!-- //这里的value就是 imgArr -->
      value: {  
      type: Array | Object,
      default: function () {
        return [];
      },
    },
}

methods:{
    <!-- 改变imgArr数据 -->
 setImgArr(){
    this.$emit('input', result);
}
}
</script>

vue3.0

父组件
<template>
        <drag-image v-model="imgArr"></drag-image>
</template>


子组件
<script>
 emits: ['update:modelValue'],
 props: {
      <!-- //这里的value就是 modelValue -->
      modelValue: {  
      type: Array | Object,
      default: function () {
        return [];
      },
    },
}

methods:{
    <!-- 改变imgArr数据 -->
 setImgArr(){
      this.$emit("update:age", e.target.value);
}
}
</script>