vue3⽗⼦组件传值（v-model避坑指南），亲测有效⼀、使⽤场景
点击button弹出弹框，弹框是⼀个⾃定义组件「child.vue」
⼆、⽗组件：
1. ⽗组件使⽤v-model传值给⼦组件制动踏板总成
// parent.vue //
<!-- 按钮 -->
<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 //
<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) {
mg6// 使⽤ it('update:visible', false)，改变⽗组件visible的值
const handleClose = function() {
}
return { handleClose }
}
})
大7 suv怎么样</script>
乌海车管所2. ⚠ 注意
（1）这⾥有个⼤坑，<el-dialog>中⼀定要⽤model-value 来代替 v-model，不能⽤v-model，否则会报错（2）⼦组件中修改⽗组件传⼊的参数visible 时，使⽤ ⽅式
发布评论