vue3 父子组件双向绑定

父组件

<template>
    <button @click="changeVisible">按钮<button>
    <Inner v-model="visible"/>
</template>
<script setup>
import Inner from './inner'
import { ref } from 'vue'
const visible = ref(false)
const changeVisible = () => {
    visible.value = true
}
</script>

子组件

<template>
    <div v-show="visible">
        <button @click="visible = false">关闭</button>
    </div>
</template>

<script setup>
</script>

这样就可以实现双向传值了

之前是用emit=['update:xxx']这种方式实现的,今天忘记细节了无意中发现v-model竟然有用,具体为什么我还不太清楚


版权声明:本文为a9874561328原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。