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>
 

vue裏面的父子通信