Vue元件中值是如何傳遞的？

一、父子元件傳值

1. 在Vue的官方文件中通過prop向子元件傳遞資料有講解

下面圖片是我對Vue元件傳值的理解

（1）Vue例項中的資料data——>posts陣列儲存資料，可以通過元件標籤<my-componetn>中的v-for迴圈得到posts陣列的每個物件，然後通過v-bind將物件資料繫結在元件標籤<my-component>自定義的屬性名上（title、content）

（2）元件標籤<my-component>從Vue例項中獲取的資料，可以傳給元件例項的props陣列中，並且用相同的屬性名去接收資料

（3）元件模板中的標籤可以使用props中的屬性

2. 當要傳的值很多的時候，props中接收的就不僅僅是“title”、“content”，還可能有name、age、等等自定義的屬性，那樣豈不是更麻煩？所以將整個物件傳遞給元件

    <div id="component-demo">
        <my-component v-for="post in posts" v-bind:post="post"></my-component>
    </div>
    <script src="./vue.js"></script>
    <script>
        Vue.component('my-component',{
            props: ['post'],
            template: `
                <div>
                    <h3 class=".title">{{post.name}}</h3>
                    <div class=".content">{{post.age}}</div>
                </div>               
            `,
        })
        new Vue({
            el: "#component-demo",
            data:{
                posts: [
                    {name:'zhu',age:22}
                ]
            },
        })
    </script>
 

注意：傳遞的步驟是不變的，只是處理的屬性名有所改變。

3. 向元件標籤傳遞資訊或者指令，從而使元件觸發一些事件

    <div id="component-demo">
        <my-component v-for="post in posts" v-bind:post="post" :count="count" v-on:add-count="count++"></my-component>
        
    </div>
    
    <script>
        Vue.component('my-component',{
            props: ['post','count'],
            template: `
                <div>
                    <h3 class=".title">{{post.name}}</h3>
                    <div class=".content">{{post.age}}</div>  
                    <button v-on:click="$emit('add-count')">you click {{count}} times</button> 
                </div>               
            `,
        })
        new Vue({
            el: "#component-demo",
            data:{
                count: 0,
                posts: [
                    {name:'zhu',age:22}
                ]
            },
        })
    </script>
 

 元件結構中的button標籤可以通過$emit將點選事件和自定義事件“add-count”關聯起來，“add-count”事件在元件標籤<my-component>中監聽，這就是：通過元件結構內的標籤向元件標籤傳遞資訊或者指令（不是傳遞資料）

需要注意的是：

（1）html標籤不區分大小寫，而

內部是區分大小寫的，所以不能大小駝峰命名：addCount

（2）props接收了data下posts中的每個物件post，同時也可以接收data下的count值，注意值在元件中的傳遞

（3）Vue例項中所用的所有資料變數名，都要在data物件中申明

3.1 除了傳遞指令或者訊息，還可以傳遞值

具體的在元件基礎——Vue.js有講解

二、非父子元件傳值

1. bus匯流排

原理：

例項：在vue原型上建立一個bus屬性，bus屬性==new Vue（）物件。例項中的在bus屬性上，$emit 傳值 和 $on繫結事件接收值；通過counted鉤子函式給元件繫結同樣的事件，當change事件需要觸發時，兩個元件都會觸發。

注意：觸發change事件，傳入的值。

    <div id="app">
       <child content="Dell"></child> 
       <child content="Lee"></child> 
    </div>
    <script>
        Vue.prototype.bus = new Vue() //在Vue原型上定義一個Vue例項，原型擁有了Vue例項的方法和屬性

        var child = {
            props: {
                content: String
            },
            data: function(){
                return {
                    name: this.content
                }
            },
            template: `<div @click="byValue">{{name}}</div>`,
            methods: {
                byValue(){
                    this.bus.$emit('change', this.name)
                }
            },
            mounted: function(){  //生命週期鉤子，也可以繫結在元件上，即元件掛在頁面的時候觸發，
            // 當觸發mounted的時候，元件上有個bus屬性，上有$on方法，可以繫結事件
                var _this = this;
                this.bus.$on('change', function(msg){
                    _this.name = msg                 
                })
            }
        }
        var vm = new Vue({
            el: '#app',
            components: {
                child 
            },
        })
    </script>

兩個元件上都綁定了change事件，當觸發其中一個元件的點選事件時，會通過$emit 傳遞資訊，綁定了change事件的元件都觸發了change事件。並且傳入的值 都是this.name（其中一個元件的name值）