iview render 子组件 给父组件传值

版权声明： 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)
}