1.父元件傳值子元件

原理：父元件給子元件新增屬性，子元件通過props獲取屬性值，接收到父元件傳遞的引數；

案例如下：

父元件程式碼如下：

<template>
    <div>
        <!-- 父元件新增入參生成模組 -->
        父元件傳遞：<input type="text" v-model="value">
        <!-- 子元件定義傳遞引數屬性text -->
        <ChildA
            :text='value'>
        </ChildA>
    </div>
</template>
<script>
import ChildA from '../components/childA.vue';
export default {
    data(){
        return{
            value:''
        }
    },
    components:{
        ChildA,
    },
}
</script>
 

子元件程式碼如下：

<template>
    <div>
        接收父元件的值：{{text}}
    </div>
</template>
<script>
export default {
    data(){
        return{}
    },
    // 接收父元件屬性
    props:['text']
}
</script>

ps：在父元件定義text屬性並將引數通過該屬性傳遞至子元件ChildA，在子元件通過props接收text屬性並使用；

2.子元件傳值父元件

原理：子元件通過$emit派發，子元件通過props獲取屬性值，接收到父元件傳遞的引數；

案例如下：

子元件程式碼如下：

<template>
    <div>
        <!-- 子元件新增入參生成模組，監聽輸入框改變向父元件傳送資料“childChange”-->
        子元件傳遞：
        <input 
            type="text" 
            v-model="value"
            @input='childChange'>
    </div>
</template>
<script>
export default {
    data(){
        return{
            value:''
        }
    },
    methods:{
        childChange(){
            // 通過this.$emit向父元件傳送資料，資料放在“childChange”中
            this.$emit('childChange',this.value)
        }
    }
}
</script>
 

父元件程式碼如下：

<template>
    <div>
        父元件接收值：{{text}}
        <!-- 繫結“childChange”，添加回調“receive”接收引數 -->
        <ChildA
            @childChange='receive'>
        </ChildA>
        <p />
    </div>
</template>
<script>
import ChildA from '../components/childA.vue';
export default {
    data(){
        return{
            text:''
        }
    },
    components:{
        ChildA,
    },
    methods:{
        // 通過回撥函式入參獲取子元件傳遞的引數
        receive(value){
            this.text = value;
        }
    },
}
</script>

ps：在子元件定義方法通過this.$emit傳送資料，在父元件通過給子元件新增繫結事件，獲取子元件的引數並使用；

3.兄弟元件傳值

原理：引入中間控制元件，傳送資料元件通過$emit傳送資料，接收資料元件通過$on接收資料；

案例程式碼如下：

中間控制元件程式碼如下：

import Vue from 'Vue';
export default new Vue;

ps：建立一個vue例項並匯出，作為中間控制元件使用；

父元件程式碼如下：

<template>
    <div>
        <ChildA></ChildA>
        <childB></childB>
    </div>
</template>
<script>
import ChildA from '../components/childA.vue';
import ChildB from '../components/childB.vue';
export default {
    data(){
        return{}
    },
    components:{
        ChildA,
        ChildB
    },
}
</script>

子元件A（資料發出元件）程式碼如下：

<template>
    <div>
        <!-- 子元件A新增入參生成模組，監聽輸入框改變向元件B傳送資料-->
        子元件傳遞：
        <input 
            type="text" 
            v-model="value"
            @input='childChange'>
    </div>
</template>
<script>
// 引入中間控制元件
import Bus from '../assets/Bus.js';
export default {
    data(){
        return{
            value:''
        }
    },
    methods:{
        childChange(){
            // 通過Bus.$emit向B元件傳送資料，資料放在“childChange”中
            Bus.$emit('childChange',this.value)
        }
    }
}
</script>

子元件B（資料接收元件）程式碼如下：

<template>
    <div>
        元件接收的值{{text}}
    </div>
</template>
<script>
// 引入中間控制元件
import Bus from '../assets/Bus.js';
export default {
    data(){
        return{
            text:''
        }
    },
    created(){
        // 通過Bus.$on接收A元件發來資料
        Bus.$on('childChange',(value)=>{
            this.text = value
        })
    }
}
</script>

ps：在傳送資料和接收資料的元件都需要引入Bus.js作為中間控制元件；

以上內容為個人總結，不足之處還望支援，歡迎留言交流～