vue项目中要使用Element UI组件的对话框Dialog,因为该组件相比其他组件稍微复杂一点,并且有事件需要处理,所以单独写在了一个模板里,需要一个props,从父组件向子组件传递布尔值,是否显示该对话框,并且打算在该子组件里处理取消和确定事件。
鉴于vue官方文档说
不应该在一个子组件内部改变 prop
如果这个 prop 用来传递一个初始值;这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下,最好定义一个本地的 data 属性并将这个 prop 用作其初始值:
props: [‘initialCounter’],
data: function () {
return {
counter: this.initialCounter
}
}
我的代码如下:
<template>
<div class="wrapper">
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<span>确定要退出吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelExit">取 消</el-button>
<el-button type="primary" @click="exitConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
dialog: {
type: Boolean,
default: true
}
},
data() {
return {
visible: this.dialog
};
},
mounted() {
console.log(this.visible)
},
computed: {
dialogVisible() {
console.log(this.visible);
return this.dialog;
}
},
在mounted方法中打印this.visible 为false,在触发事件显示该对话框时会执行dialogVisible计算属性,此时this.dialog为true,但是此时打印的this.visible也是false,为什么没有像官网说的那样接收到props的值??是不是我哪里写错了或者理解错了,路过的高人能否告知一下,谢谢!
然后尝试别的方法:
vm.$emit()方法,让子组件的事件在父组件中执行,代码如下:
//父组件
<template>
<span v-else @click="exitClick">
<i class="iconfont exit"></i>退出
</span>
<DialogExit :dialog-visible="dialogVisible" @dialog="operateDialog"></DialogExit>
</template>
<script>
import DialogExit from "./components/DialogExit/DialogExit";
export default {
methods: {
//退出登录
exitClick() {
this.dialogVisible = true;
},
//执行退出自定义事件
operateDialog(e) {
if (e) {
localStorage.clear();
this.$store.dispatch("exit");
this.dialogVisible = !e;
} else {
this.dialogVisible = e;
}
}
}
};
<script>
//子组件
<template>
<div class="wrapper">
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<span>确定要退出吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelExit">取 消</el-button>
<el-button type="primary" @click="exitConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
props: {
dialogVisible: {
type: Boolean,
default: false
}
},
methods: {
//确定退出登录
exitConfirm() {
this.$emit('dialog', true) //自定义事件
},
//取消退出
cancelExit() {
this.$emit('dialog', false) //自定义事件
}
}
};
</script>
pubsub-js发布-订阅
先安装“npm install --save pubsub-js”
在需要的组件里引入“import PubSub from ‘pubsub-js’”
代码如下:
//父组件
<template>
<span v-else @click="exitClick">
<i class="iconfont exit"></i>退出
</span>
<DialogExit :dialog-visible="dialogVisible"></DialogExit>
</template>
<script>
import DialogExit from "./components/DialogExit/DialogExit"
import PubSub from 'pubsub-js'
export default {
created() {
//订阅关闭弹窗事件
PubSub.subscribe("dialog", (event, e) => {
if (e) {
localStorage.clear();
this.$store.dispatch("exit");
this.dialogVisible = !e;
} else {
this.dialogVisible = e;
}
});
},
methods: {
//退出登录
exitClick() {
this.dialogVisible = true;
}
}
};
<script>
//子组件
<template>
<div class="wrapper">
<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
<span>确定要退出吗?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelExit">取 消</el-button>
<el-button type="primary" @click="exitConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import PubSub from 'pubsub-js'
export default {
props: {
dialogVisible: {
type: Boolean,
default: false
}
},
methods: {
//确定退出登录
exitConfirm() {
PubSub.publish('dialog', true); //发布
},
//取消退出
cancelExit() {
PubSub.publish('dialog', false); //发布
}
}
};
</script>
可以参考一下这篇文章vue 组件间通信 PubSub 发布订阅