父组件
子组件将弹窗内容写到父组件中:
父组件通过v-on(@)绑定一个事件方法,方法名与子组件定义的一样dialogBegin
<div>
<twoStep @dialogBegin="dialogBegin"></twoStep>
</div>
<a-modal
v-model:visible="addVisible"
:title="'添加指标'"
:footer="null"
:afterClose="afterClose"
:destroyOnClose="true"
width="80%"
>
<div>1111111</div>
<div class="footButton">
<a-button style="margin-left: 60px" @click="afterClose">取消</a-button>
</div>
</a-modal>
js:
//添加指标弹窗
const addVisible = ref(false);
//关闭弹窗之后的回调
const afterClose = () => {
addVisible.value = false
}
const dialogBegin = ()=>{
addVisible.value = true
}
子组件:
<a-button type="primary" @click="addList">新增</a-button >
点击新增按钮,触发父组件中的弹窗
是通过emit向父组件传递一个dialogBegin 方法,父组件接受这个方法,然后去改变变量addVisible,让弹窗打开
注意:使用emit去发送。需要注册emit
export default {
name: "twoStep",
emits: [ "dialogBegin"],
setup(props, context) {
const addList = () => {
context.emit("dialogBegin");
}
return {
addList,
};
}
}
说明:
emit有两种注册方式
// 数组语法
app.component('todo-item', {
emits: ['check'],
created() {
this.$emit('check')
}
})
// 对象语法
app.component('reply-form', {
emits: {
// 没有验证函数
click: null,
// 带有验证函数
submit: payload => {
if (payload.email && payload.password) {
return true
} else {
console.warn(`Invalid submit event payload!`)
return false
}
}
}
})