vue3使用v-model控制子组件进行双向数据绑定

qq_427506082023-10-07 9:26

vue2写法:

中父组件调用子组件:

子组件想要消失, 在子组件写:

this.$emit("update:isShow",false);

具体代码就不粘贴了

vue3写法:

父组件核心代码:

v-model:a="xxx"

子组件核心代码:

defineProps({

a: 数据类型, // 父页面传递的数据

});

interface IEmits {

(e: 'update:a', arg1: 数据类型): void;

}

const emits = defineEmits<IEmits>();

调用父组件的方法:

emits("update:isShow", false);

使用示例:

注意: v-model:isShow="isShow" 如果拆开写就是 @update:isShow="bol=>isShow=bol" :isShow="isShow"

父组件代码如下:

复制代码

<script setup>
import { ref, defineAsyncComponent } from 'vue'

// 异步组件
const ChildA = defineAsyncComponent(() => import('./components/Test.vue'));

const isShow = ref(false);
const show = () => {
  isShow.value = true
}
</script>

<template>
  <input type="button" value="我是父组件中的按钮, 让子组件出现" @click="show">
  <!-- v-model:isShow="isShow"=> @update:isShow="bol=>isShow=bol" :isShow="isShow" -->
  <ChildA v-model:isShow="isShow" />
</template>

<style scoped>
</style>

子组件逻辑:

因为 v-model:isShow="isShow" 如果拆开写就是 @update:isShow="bol=>isShow=bol" :isShow="isShow"

所以:

defineProps({

isShow: Boolean

});

const hide = () => {

emits("update:isShow", false);

}

子组件代码如下:

复制代码

<script setup lang="ts">
// 父组件传数据 v-model:isShow="isShow"
// v-model:isShow="isShow"=> @update:isShow="bol=>isShow=bol" :isShow="isShow"
defineProps({
  isShow: Boolean
});

interface IEmits {
  (e: 'update:isShow', arg1: Boolean): void;
}
const emits = defineEmits<IEmits>();

const hide = () => { // 因为父页面传过来的方法相当于是bol=>isShow=bol, 所以传false就会消失
  emits("update:isShow", false);
}
</script>

<template>
  <div v-show="isShow">
    <button @click="hide">我是子组件,点我消失</button>
  </div>
</template>

<style scoped>
button {
  margin: 10px;
}
</style>