Vue 的組件作用域都是孤立的揩环，不允許在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)亿乳。必須使用特定的方法才能實現(xiàn)組件之間的數(shù)據(jù)傳遞。

1-props:子組件的模板內(nèi)并不能直接使用父組件的數(shù)據(jù)，所以子組件需要用props選項來獲取父組件的數(shù)據(jù)咱圆。

1- 動態(tài)語法：用v-bind將動態(tài)props綁定到父組件的數(shù)據(jù)诫舅，父組件的數(shù)據(jù)發(fā)生改變羽利，子組件也會隨之改變

<div id="app">
    <didi-component  :msg="value"></didi-component>//傳入獲取的數(shù)據(jù)，引號里面為獲取到的數(shù)據(jù)
</div>
<script>
    window.onload=function(){
        Vue.component('didi-component',{
            template:"<div>這是組件:{{msg}}</div>",
            props:['msg']            //聲明自己要從父組件獲取的數(shù)據(jù)
        });//全局注冊組件
        new Vue({
          el:'#app',
          data: {
            value:'父組件向子組件的傳遞數(shù)據(jù)'
          }
})

2-綁定修飾符：props默認為單向綁定刊懈，是為了防止子組件無意間修改父組件的狀態(tài)这弧。
.sync:雙向綁定
.once:單次綁定

<div id="app">
    <input type="text" v-model="info.name"/>
    <child :msg.once="info"></child>        //單次綁定
</div>
<script>
    window.onload=function(){
        new Vue({
          el:'#app',
          data:function(){
              return {
                  info:{
                      name:"順風車"            //父組件
                  }
              }
          },
          components:{
               child:{
                   props:['msg'],
                   template:"<div>{{msg.name}}歡迎！</div>"    //子組件
               }
          }
 
})
}

2-組件通信：自定義事件（每個vue實例都是一個事件觸發(fā)器）

1.$on()——監(jiān)聽事件虚汛。
2.$emit()——把事件沿著作用域鏈向上派送匾浪。
3.$dispatch——派發(fā)事件，事件沿父鏈冒泡卷哩。
4.$broadcast——廣播事件蛋辈，事件向下傳到后代。

<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>    
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
 
//子組件
Vue.component('button-counter', {
　　template: '<button v-on:click="increment">{{ counter }}</button>',    //v-on監(jiān)聽事件
　　data: function () {
　　　　return {
　　　　　　counter: 0
　　　　}
　　},
　　methods: {
　　　　increment: function () {
　　　　　　this.counter += 1
　　　　　　this.$emit('increment')    //觸發(fā)事件
　　　　}
　　},
})
new Vue({
　　el: '#counter-event-example',    //父組件
　　data: {
　　　　total: 0
　　},
　　methods: {
　　　　incrementTotal: function () {
　　　　　　this.total += 1            //點擊一次+1
　　　　}
　　}
})

3-slot分發(fā)內(nèi)容——不同的使用場景組件的一部分內(nèi)容需要有不同的內(nèi)容顯示，而這個slot就好比組件開發(fā)時定義的一個參數(shù)（通過name值來區(qū)分）冷溶，如果你不傳入就當默認值使用渐白，如果你傳入了新的值，那么在組件調(diào)用時就會替換你定義的slot的默認值逞频。

主要應(yīng)用場景是纯衍，混合父組件的內(nèi)容與子組件自己的模板時用到。具體使用步驟：
1）在子組件中苗胀，使用slot標簽作為組件模板之中的內(nèi)容分發(fā)插槽襟诸。 <slot> 元素自身將被替換。
2）在父組件中基协，使用slot屬性歌亲，用于標記往哪個slot中插入子組件內(nèi)容。
當name相同時澜驮，響應(yīng)的內(nèi)容就會被插入到子組件中去;

<div id="app">
    <alert-box>發(fā)生一些錯誤应结。</alert-box>
</div>
<script>
    //注冊子組件（將當前消息派發(fā)出去）
    Vue.component('alert-box',{
        template:'<div id="demo"><strong>Error!</strong><slot></slot></div>'
    });
    new Vue({
       el:"#app",
       data:{
       }
    })
</script>