Vue3中自定义组件实现v-model

时光从指尖划过

已于 2023-06-27 10:21:11 修改

阅读量570

点赞数

文章标签：前端 vue

于 2023-06-26 10:49:10 首次发布

本文链接：https://blog.csdn.net/time__flies_/article/details/131392761

版权

官网：组件 v-model，具体使用请参考官网，有详细介绍。

简单demo

父组件

const showAdress = ref(false)
function open() {
  showAdress.value = true
}

<ShowAdress v-model="showAdress"></ShowAdress>
<button @click="open">展示</button>

子组件

<script setup>
// props
const props = defineProps({
  'model-value': {
    type: Boolean,
    required: false,
    default: false
  }
});

const emit = defineEmits(['update:model-value']);
function close() {
  emit('update:model-value', false)
}
</script>

<template>
  <div v-if="modelValue">
    <div class="">我是子组件</div>
    <button @click="close">关闭</button>    
  </div>
</template>