一.父元件--->子元件 props 1.特點:props是用於父元件向子元件傳遞資料資訊（props是單向繫結的，即只能父元件向子元件傳遞，不能反向 2.用法：父元件中使用子元件時，繫結要傳遞的資料，父元件中對要繫結的資料新增方法或者值 子元件通過props接收值 3.示例

// 父元件
<template>
    <div>我是父元件</div>
    <add-configuration:message="checkList" />
</template>
importaddConfigurationfrom'@/components/addConfiguration.vue
 
'
exportdefault{
    components:{
        addConfiguration    
    },
    data() {
        return {
            checkList:[]        
        }    
    },
    methods:{
         getList() {
             ....
             this.checkList= ...         
         }   
    }
}

// 子元件
<template>
    <div>我是子元件</div>
    <div>我是父元件傳遞過來的陣列{{message}}</div>
</template>
export
 
default{
   props:{
    message:{
    type:Array,
    default:()=>[]
    }
},
    data() {
        return {                
        }    
    }
}

二.子元件--->父元件 $refs 1.特點：父元件獲取子元件的方法或者屬性，$refs 資料是雙向繫結的，子元件可以向父元件傳遞方法，父元件可以向子元件傳遞引數 2.用法：父元件通過子元件中 的ref標識來獲取子元件的方法或者屬性 this.$refs.標識.方法 3.示例：

// 父元件
 

<template>
    <div>我是父元件</div>
    <add-configurationref="configurationRef" />
</template>
importaddConfigurationfrom'@/components/addConfiguration.vue'
exportdefault{
    components:{
        addConfiguration    
    },
    data() {
        return {                 
        }    
    },
    methods:{
         getList() {
             this.$ref.transforFntoFather()         
         }   
    }
}

// 子元件
<template>
    <div>我是子元件</div>
</template>
exportdefault{
    data() {
        return {                
        }    
    },
    methods:{
         transforFntoFather() {
             ....         
         }   
    }
}

三.子元件--->父元件 $emit 1.特點：父元件向子元件通訊，而通過e m i t 實 現 子 組 件 向 父 組 件 通 信 。 對 於 emit 實現子元件向父元件通訊 2.用法： 父元件中的子元件繫結一個事情@事件名 父元件處理事件方法 子元件呼叫 this.emit(事件名) 3.示例：

// 父元件
<template>
    <div>我是父元件</div>
    <add-configuration@fatherMethod="initialData" />
</template>
importaddConfigurationfrom'@/components/addConfiguration.vue'
exportdefault{
    components:{
        addConfiguration    
    },
    data() {
        return {                 
        }    
    },
    methods:{
         initialData() {
             .... // 請求api介面返回資料       
         }   
    }
}

// 子元件
<template>
    <div>我是子元件</div>
</template>
exportdefault{
    data() {
        return {
         configCategory:1             
        }    
    },
    mounted(){
        this. getListData()   
    }
    methods:{
         getListData() {
             this.$emit('fatherMethod',this.configCategory)     
         }   
    }
}