vue 父传子 子传父 （element-ui Dialog 点击展开按钮在父组件，弹框在子组件案列）

父传子：

主要是通过props来实现

具体实现：父组件通过import 引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过props接收

---

 子传父：

主要通过$emit实现

具体实现：子组件通过绑定事件触发函数，在其中设置this.$emit(' 要派发的自定义事件 ' ,  要传递的值)，然后父组件中在这个子组件身上@派发的自定义事件触发的methods中的方法接收的默认值就是传过来的参数

---

父组件

<template>
    <div>
        <el-button type="primary" @click="dialogBtn">点击打开Dialog</el-button>

        <!-- 子组件标签 -->
        <sonDialog
        // 父组件往子组件传值
        :dialogShow = 'dialogShow'
        // 父组件接收子组件点击 X 和 取消按钮 时传过来的值
        @close = 'getClose' 
        // 父组件接收子组件点击确认按钮时传过来的值
        @sure = 'getSure'

        ></sonDialog>
    </div>
</template>

<script>
// 在父组件里引入子组件
import sonDialog from './son.vue'
export default {

    // 在父组件里注册子组件
    components:{sonDialog},

    data(){
        return{
            // 默认弹框不显示 为false
            dialogShow:false
        }
    },

    methods: {

        // 点击 打开Dialog 按钮使弹框显示 为true
        dialogBtn(){
            this.dialogShow = true;
        },

        // 接收子组件取消按钮传过来的值
        getClose(val){
            this.dialogShow = val;
        },

        // 接收子组件确认按钮传过来的值
        getSure(val,info){
            console.log(val,info);
            this.dialogShow = val;
        }
    },
}
</script>

子组件

<template>
    <div>
        <el-dialog title="提示" 
            :visible.sync="dialogShow" 
            width="30%" 
            :before-close="dialogClose"
        >
            <span>这是一段信息</span>
            
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogClose = false">取 消</el-button>
                <el-button type="primary" @click="dialogSure = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {

    // 接收父组件传过来的值，控制弹框是否显示 (直接使用)
    props: ['dialogShow'],

    data() {
        return {
            // 点击确认按钮时子组件传给父组件的数据
            sonInfo: [
                { name: '张三', age: 20 },
                { name: '李四', age: 21 },
                { name: '王五', age: 22 },
                { name: '赵六', age: 23 }
            ]
        }
    },

    methods: {

        // 点击X 和 取消按钮 子组件往父组件传值(作用:关闭弹框)
        dialogClose() {
            this.$emit('close', false);
        },

        // 点击确认按钮 子组件往父组件传值(作用:关闭弹框,以及传值) 可传多个值
        dialogSure() {
            this.$emit('close', false, this, sonInfo);
        }
    },
}

</script>