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

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">
import { defineProps } from 'vue';
// 父组件传数据 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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/149566.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！