vue3 父子组件传值(v-model避坑指南),亲测有效!!!
一、使用场景点击button弹出弹框,弹框是一个自定义组件「child.vue」二、父组件:1. 父组件使用 v-model 传值给子组件// parent.vue //<template><!-- 按钮 --><el-button @click="addMenu('new')">打开弹框</el-button><!-- 自定义组件,下面这两种
·
一、使用场景
点击button弹出弹框,弹框是一个自定义组件「child.vue」
二、父组件:
1. 父组件使用 v-model 传值给子组件
// parent.vue //
<template>
<!-- 按钮 -->
<el-button @click="addMenu('new')">打开弹框</el-button>
<!-- 自定义组件,下面这两种写法都可以👇 -->
<MediaDialog :name="name" v-model:visible="dialogMediaVisible" />
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
name: 'MediaCenter',
setup() {
const dialogMediaVisible: Ref = ref(false)
const name = '🚌🚌🚌🚌🚌🚌🚌🚌🚌父组件传递的name🚌🚌🚌🚌🚌🚌🚌🚌🚌'
const addMenu = function(status) {
dialogMediaVisible.value = true
}
return {
name,
dialogMediaVisible,
}
}
})
</script>
二、子组件:
1. 子组件使用 props 接收父组件传来的值
// child.vue //
<template>
<div>
<!--⚠️注意这里有个大坑,一定要用 model-value,不能用v-model -->
<el-dialog
class="mediaDialog"
title="我是一个弹框"
:model-value="visible"
:before-close="handleClose">
<span>{{ name }}</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="handleClose">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, provide } from 'vue'
export default defineComponent({
name: 'mediaDialog',
props: {
name: String,
visible: Boolean
},
setup(props, context) {
// 使用 context.emit('update:visible', false),改变父组件visible的值
const handleClose = function() {
context.emit('update:visible', false)
}
return { handleClose }
}
})
</script>
2. ⚠️注意
(1)这里有个大坑,<el-dialog> 中一定要用 model-value 来代替 v-model,不能用v-model,否则会报错
(2)子组件中修改父组件传入的参数 visible 时,使用 👇方式
context.emit('update:参数名', 改变的值)
更多推荐
已为社区贡献2条内容
所有评论(0)