版权声明: https://blog.csdn.net/XiaoYi0215/article/details/82252995
我这里是一个点击事件调用了this.$Modal.confirm,想要自定义模态框中的内容,自定义内容又有tab切换,调用接口,点击事件等复杂操作,所以干脆将该自定义的部分写成了一个组件进行调用。
要实现的功能如下图所示:
点击某个btn按钮,弹出此框。
/**
* 1. 父组件
*/
import theModal from '..';
btnClick () { // 点击事件
this.$Modal.confirm({
width: '880px',
render: (h) => { // 2. render函数使用
return h (theModal, { // 3. theModal即为上图所示的要实现的组件
// 8. 父组件获取子组件传入的值
on: {
// 9. 接收子组件中使用$emit传输的方法
getID: (val) => {
// 10. 此处的val值即等于子组件通过getMenuID方法获取到的id
console.log(val);
// 11. 使用
}
}
})
}
})
}
components: {theModal}
/**
* 4. 子组件 theModal
* 5. 子组件构建...
* 6. eg: 子组件中需要点击选中某个菜单获取其id,子组件中定义getMenuID 方法 点击将id传入
*/
getMenuID (id) {
// 7. 使用$emit 将子组件获取的id值传给父组件
this.$emit('getID', id)
}