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

最新推荐文章于 2024-05-01 13:03:12 发布

邯郸达文西

最新推荐文章于 2024-05-01 13:03:12 发布

阅读量1.1k

点赞数 1

文章标签： uni-app 前端 javascript

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

版权

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>