vue里面的父子通信

Posted 2020-10-25 李美玲

vue的父子通信

vue的父传子

<!--父组件页面-->
        <el-dialog :title="this.dialogTitle">
            <addTeam :team-type="teamType"></addTeam>      //在用子组件的地方传值
        </el-dialog>
//data里还需定义一个teamType，然后在你使用的地方给其赋值

<!--子组件页面-->
props: {
            teamType: {
                type: String,
                default: ‘add‘
            },
        },    //这样一来父页面的teamType就传到了子页面，子组件页面内的使用的方式是this.teamType就可以全局使用

vue的子组件更新父组件

<!--子组件页面-->
<div slot="footer" class="dialog-footer">
            <el-button @click="$emit(‘update:show‘, false)">取消</el-button>  //子组件里用行内绑定方法的方式，更新show方法----------------这是一种通知父组件更新代码的方式
                        this.$emit(‘handle‘);      //------这也是一种更新父组件代码的方法
        </div>


    <!--父组件页面-->
        <el-dialog :title="this.dialogTitle" :visible.sync="showAddteam"> // 这个showAddteam是控制外层dialod显示隐藏的
            <addTeam :team-type="teamType" @handle="searchlist" :show.sync="showAddteam"></addTeam>    //这个showAddteam是控制子组件的显示隐藏的，并从父这边传给子那边
        </el-dialog>