vue弹窗组件的使用(传值),以及弹窗只能触发一次的问题
作者：猴子都会我不会
这篇文章主要介绍了vue弹窗组件的使用(传值),以及弹窗只能触发一次的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue弹窗组件的使用以及弹窗只能触发一次
1.父组件引入并注册子组件
import BusinessDialog from '../../components/BusinessDialog'
export default {
components: {
BusinessDialog
},
data() {
return {
dialog:false;
};
},2.在父组件中使用子组件
<business-dialog :dialog.sync="dialog"></business-dialog> //这里的dialog就是要传递给子组件的值,默认是false(不弹出)
3.事件触发改变dialog的值
openDialog() {
this.dialog = true
},
//在父组件中点击编辑按钮,触发弹窗以下是子组件的操作
export default {
//子组件通过props接收父组件传递过来的值 dialog控制弹窗的弹出及隐藏
props: {
dialog: {
type: Boolean,
default: false,
},
},
data() {
return {
};
},
methods: {
checkDate(val) {},
//解决弹窗只能弹一次的问题(点击确定和取消按钮的时候,给dialog做一个重新赋值)
confirm() {
this.$emit("update:dialog", false);
},
cancle() {
this.$emit("update:dialog", false);
},
//子组件传值给父组件(onChange是传递给父组件的事件名, true是传递给父组件的值)
this.$emit('onChange',true)
},
};父组件怎么接收子组件传的值呢?
<business-dialog :dialog.sync="dialog" @onChange="getData"></business-dialog>
methods:{
getData(val) {
//这个val就是接收到的子组件传递过来的值啦~~~~
}
}关于弹窗组件的优化处理
在之前的项目中，发现很多页面中有很多选择各种数据的弹窗,如下：
一般来说，在vue的项目中写成一个子组件，在父组件中引用即可。
问题在于
- 1.在父组件中要定义变量，什么时候展示该子组件
- 2.父子组件中的通信，父组件要定义方法传给子组件调用
- 3.大量的父组件需要用到这个组件时，难免要重复上面的操作
于是，我想出一种思路，可不可以在父组件中通过调用方法的方式调用这个子组件，不需要在父组件中定义变量定义方法，省去一部分代码，如下：
this.alertWbs(); // 打开上面的弹窗
具体思路如下
当调用这个方法的时候采用Vue.extend动态构建一个组件，具体代码如下：
import Vue from 'vue';
import wbs from './wbs'; // 子组件
const Wbs = Vue.extend(wbs);
var instance = null; // 这里做一个处理，只需要一个实例
export function alertWbs(){
if(!instance){
instance = new Wbs();
instance.$mount();
document.body.appendChild(instance.$el);
}
instance.projectAreaDialog = true; // 控制子组件自己的显示
}这样以后，调用alertWbs方法以后，子组件会显示出来。
那么还存在另外一个问题，当子组件中选择完了数据以后如何告知父组件
思路：在点击子组件按钮的时候，通知父组件，我已经选好数据了。
如何通知？
第一时间想到的是Promise，利用Promise的机制，当我点击了子组件的按钮时将数据通过resolve的方式推送给父组件，那么父组件里面的方法就可以写成这样
this.alertWbs().then(res=>{
console.log(res); // 此时传过来的res应该就是子组件中选择的数据了
})那么，改造一下子组件，让子组件返回一个Promise对象
import Vue from 'vue';
import wbs from './wbs';
const Wbs = Vue.extend(wbs);
var instance = null;
export function alertWbs(){
if(!instance){
instance = new Wbs();
instance.$mount();
document.body.appendChild(instance.$el);
}
instance.projectAreaDialog = true;
return new Promise((resolve,reject)=>{
instance.promise = { // 将promise挂载到子组件实例上，因为目前为止，谁也不知道什么时候resolve数据
resolve,reject
}
})
}在wbs.vue文件中
choose(value){
this.promise.resolve(value); // 向父组件传值
this.projectAreaDialog = false; // 改变自己的状态，隐藏
}大功告成！！！
进一步优化，父组件如何传值给子组件呢？
在一个方法中，最容易想到的肯定是方法的参数，改变一下父组件调用的方法
this.alertWbs(params).then(res=>{
console.log(res); // 此时传过来的res应该就是子组件中选择的数据了
})子组件接受值
import Vue from 'vue';
import wbs from './wbs';
const Wbs = Vue.extend(wbs);
var instance = null;
export function alertWbs(params){
if(!instance){
instance = new Wbs();
instance.$mount();
document.body.appendChild(instance.$el);
}
instance.projectAreaDialog = true;
instance.params = params; // 直接放在子组件的实例上
return new Promise((resolve,reject)=>{
instance.promise = { // 将promise挂载到子组件实例上，因为目前为止，谁也不知道什么时候resolve数据
resolve,reject
}
})
}当然为了让子组件更加灵活，可以内置一个钩子函数，当子组件显示的时候自动调用，我这里用的是init方法，完整的代码如下：
import Vue from 'vue';
import wbs from './wbs';
const Wbs = Vue.extend(wbs);
var instance = null;
export function alertWbs(){
if(!instance){
instance = new Wbs();
instance.$mount();
document.body.appendChild(instance.$el);
}
instance.projectAreaDialog = true;
// init方法获取页面数据
instance.init();
return new Promise((resolve,reject)=>{
instance.promise = {
resolve,reject
}
})
}init方法其实就是wbs.vue中的普通方法，需要定义
以上调用方法使用到的this，是由于该方法挂载在vue的原型对象上，不需要在每个组件中引用
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。