uni-app vue2 vue3 自定义组件v-model双向绑定

奔跑吧前端菜鸟

已于 2023-09-14 10:39:02 修改

阅读量2.2k

点赞数 3

分类专栏：前端文章标签： uni-app 前端 vue.js

于 2023-03-03 18:01:42 首次发布

本文链接：https://blog.csdn.net/wanhongxu/article/details/129324842

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

这篇文章展示了在uni-app、vue2和vue3中使用v-model进行父子组件通信的方法。在uni-app和vue2中，定义了model属性和事件，而在vue3中，使用了`v-model:`和`defineProps`、`defineEmits`进行数据绑定和事件发射。

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

一.uni-app

// 父级
<components v-model='value' />
// 子级
<script>
export default {
 model: {
        prop: 'value',
        event: 'input' // event 后的值必须是input,其他值无效。
  },
  props: {
    value: {
       type: String,
        default: ''
    }
  },
  data() {
    return: {
       textareaVal: ''
     }
  },
  watch: {
    value(val) {  this.textareaVal = val }
  },
  methods: {
   onInput() {
      this.$emit('input', this.val)
    }
  }
}
</script>

二.vue2

// 父级
<components v-model='value' />
// 子级
<script>
export default {
 model: {
        prop: 'perModelSelectVisible',
        event: 'getPerModelSelectVisible'
  },
  props: {
    perModelSelectVisible: {
       type: Boolean,
       default: false
    }
  },
  data() {
    return: {
       visible: false
     }
  },
  watch: {
    value(val) {  this.visible= val }
  },
  methods: {
   onInput() {
      this.visible = false
      this.$emit('input', this.visible)
    }
  }
}
</script>

二.vue3

// 父级
<components v-model:modelValue='visible' />
// 子级
<template>
  <a-modal
    v-model:visible="visible"
    title="批量选择"
    @cancel="onCancel"
  >
    <p>Some contents...</p>
    <p>Some contents...</p>
    <p>Some contents...</p>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps({
  modelValue: {
    type: Boolean
  }
})
const emit = defineEmits([ 'update:modelValue' ])
const visible = ref<boolean>(false)

const onCancel = () => {
  visible.value = false
  console.log(visible.value)
  emit('update:modelValue',  visible.value)
}

watch(() => props.modelValue,(newVal,oldVal) => {
  visible.value = newVal
},{immediate:true})
</script>

<style scoped>

</style>