Vue.js父與子組件之間傳參

 

父向子組件傳參

　　例子：App.vue爲父，引入componetA組件以後，則能夠在template中使用標籤（注意駝峯寫法要改爲componet-a寫法，由於html對大小寫不敏感，componenta與componentA對於它來講是同樣的，很差區分，因此使用小寫-小寫這種寫法）。而子組件componetA中，聲明props參數’msgfromfa’以後，就能夠收到父向子組件傳的參數了。例子中將msgfromfa顯示在<p>標籤中。
App.vue中

<component-a msgfromfa="(Just Say U Love Me)"></component-a>
<script>
import componentA from './components/componentA'
export default {
    new Vue({
        components: {
            componentA
        }
    })
}
</script>

componentA.vue中 

 

<p>{{ msgfromfa }}</p>
<script>
export default {
    props: ['msgfromfa']
}
</script>

 

父向子組件傳參（.$broadcast）

　　用法：vm.$broadcast( event, […args] )廣播事件，通知給當前實例的所有後代。由於後代有多個枝杈，事件將沿着各「路徑」通知。
　　例子：父組件App.vue中<input>綁定了鍵盤事件，回車觸發addNew方法，廣播事件」onAddnew」，並傳參this.items。子組件componentA中，註冊」onAddnew」事件，打印收到的參數items。
App.vue中

<div id="app">
    <input v-model="newItem" @keyup.enter="addNew" />
</div>
<script>
import componentA from './components/componentA'
export default {
    new Vue({
        methods: {
            addNew: function() {
                this.$broadcast('onAddnew', this.items)
            }
        }
    })
}
</script>

componentA.vue中

<script>
import componentA from './components/componentA'
export default {
    events: {
        'onAddnew': function(items) {
            console.log(items)
        }
    }
}
</script>

子組件向父傳參（.$emit）

　　用法：vm.$emit( event, […args] )，觸發當前實例上的事件。附加參數都會傳給監聽器回調。
　　例子：App.vue中component-a綁定了自定義事件」child-say」。子組件componentA中，單擊按鈕後觸發」child-say」事件，並傳參msg給父組件。父組件中listenToMyBoy方法把msg賦值給childWords，顯示在<p>標籤中。
App.vue中

<component-a msgfromfa="(Just Say U Love Me)" v-on:child-say="listenToMyBoy"></component-a>
<script>
import componentA from './components/componentA'
export default {
    new Vue({
        data: function() {
            return {
                childWords: ""
            }
        },
        components: {
            componentA
        },
        methods: {
            listenToMyBoy: function(msg) {
                this.childWords = msg
            }
        }
    })
}

componentA.vue中 

<button v-on:click="onClickMe">like!</button>
<script>
import componentA from './components/componentA'
export default {
    data: function() {
        return {
            msg: 'I like you!'
        }
    },
    methods: {
        onClickMe: function() {
            this.$emit('child-say', this.msg);
        }
    }
}
</script>

子組件向父傳參（.$dispatch）

　　用法：vm.$dispatch( event, […args] )，派發事件，首先在實例上觸發它，而後沿着父鏈向上冒泡在觸發一個監聽器後中止。
　　例子：App.vue中events中註冊」child-say」事件。子組件componentA中，單擊按鈕後觸發」child-say」事件，並傳參msg給父組件。父組件中」child-say」方法把msg賦值給childWords，顯示在<p>標籤中。
App.vue中

<p>Do you like me? {{childWords}}</p>
<component-a msgfromfa="(Just Say U Love Me)"></component-a>
<script>
import componentA from './components/componentA'
export default {
    new Vue({
        events: {
            'child-say': function(msg) {
                this.childWords = msg
            }
        }
    })
}
</script>

componentA.vue中 

<button v-on:click="onClickMe">like!</button>
<script>
import componentA from './components/componentA'
export default {
    data: function() {
        return {
            msg: 'I like you!'
        }
    },
    methods: {
        onClickMe: function() {
            this.$dispatch('child-say', this.msg);
        }
    }
}
</script>

這裏只說起了一些指令，更多功能建議在官網上刷一遍API文檔。