Props在vue組件中各種角色總結

在Vue中組件是實現(xiàn)模塊化開發(fā)的主要內容，而組件的通信更是vue數(shù)據(jù)驅動的靈魂，現(xiàn)就四種主要情況總結如下：

使用props傳遞數(shù)據(jù)---組件內部

//html<div id="app1">
    <i>注意命名規(guī)定：僅在html內使用my-message</i>
    <child my-message="組件內部數(shù)據(jù)傳遞"></child></div>//js<script>
    Vue.component('child', {
        props: ['myMessage'],
        template: '<mark>{{ myMessage }}<mark/>'
    });    new Vue({
        el: '#app1'
    })</script>

動態(tài)props通信---組件與根節(jié)點(父子之間)

<div id="app2">
    <input v-model="parentMsg">
    <br>
    <child :parent-msg="parentMsg"></child></div><script>
    Vue.component('child', {
        props: ['parentMsg'],
        template: '<mark>{{ parentMsg }}<mark/>'
    });    new Vue({
        el: '#app2',
        data: {
            parentMsg: 'msg from parent!'
        }
    })</script>

• 對比分析：

• 例子1:

          		
  網(wǎng)友評論