通信

父子通信

• 父組件控制子組件 父組件控制自己的數(shù)據(jù)變化措嵌，將變化后的數(shù)據(jù)通過props自定屬性傳子組件.子組件會根據(jù)父組件數(shù)據(jù)的變化而做出相應(yīng)的變化

• props (道具)自定義屬性 子組件間接受父組件傳遞過來的數(shù)據(jù)

  • /prɑps/

  1. 在子組件標(biāo)簽上使用自定屬性

  2. 在子組件內(nèi)部通過props來接受數(shù)據(jù)并命名

     1. props接受的可以是數(shù)組或?qū)ο?
        1. 區(qū)別就在于如果是對象的話可以檢查數(shù)據(jù)類型.

  3. 接受完了 既可以在組件里直接使用

     1. 使用時,使用的是props重新命名的名字.
     2. 只能用不能改

       <div id='app1'>  
         這里是實例
         {{money}}
         <hr>  
         <!-- 在tp1組件標(biāo)簽上使用 xixi自定義屬性 -->
         <tp1 :xixi='money'></tp1>
       </div> 
     
       <!-- 組件模板 -->
       <template id='tp1'>
         <div class='tp1'>
           這里是組件
           {{xixi}}
         </div>
       </template>
     <script>
     Vue.component('tp1',{
       template:'#tp1',
       data(){
         return{
           hehe:123
         }
       },
       props:{
         xixi:{type:Number} //傳值的同時檢查數(shù)據(jù)的類型
       }
       // props:['xixi'] //接收自定義屬性
     })
     
     let vm1 = new Vue({
       el:'#app1',
       data:{
         money:'資產(chǎn)'
       }
     })
     

子父通信

• 子組件控制父組件的數(shù)據(jù) 父組件控制自己的數(shù)據(jù)變化痴柔，將控制函數(shù)通過emit自定義事件傳遞子組件 供子組件調(diào)用

• $emit 可以觸發(fā)綁定在組件身上自定義事件

  1.在組件標(biāo)簽綁定一個自定義事件

  2.在組件的內(nèi)部 通過$emit 觸發(fā)這個自定事件

  在子組件里觸發(fā)父組件的方法

   <div id='app1'>  
    這里是實例
    <hr>
    <!-- 綁定在son身上的自定義事件 事件名叫 heeh 處理函數(shù)叫change -->
    <son @hehe='change'></son>
    </div> 
  <!-- 組件模板 -->
  
  <template id='tp1'>
    <div>
      這里是子組件
      <button @click='sonClick'> 這里是子組件的按鈕</button>
    </div>
  </template>
  
  <script>
  
  Vue.component('son',{
    template:'#tp1',
    methods: {
      sonClick(){
        // 通過emit方法觸發(fā)自定義事件 參數(shù)1 自定義事件名 參數(shù)2:可以傳參
        this.$emit('hehe',666)
        
      }
    },
  })
  
  let vm1 = new Vue({
    el:'#app1',
    methods: {
      change(num){
        alert('點到我了'+num)
      }
    },
  })
  

兄弟通信

• 狀態(tài)提升

  • 把兩個組件需要的數(shù)據(jù)和方法都放到他們的父元素上,然后一個接受父元素的數(shù)據(jù),一個接受父元素的方法,就可以實現(xiàn).使用組件2的方法來控制組件1的數(shù)據(jù).

    <div id='app1'>  
        <!-- 將父親的數(shù)據(jù)通過自定義屬性傳給組件1使用 -->
        <son1 :show='state'></son1>
        <hr>  
         <!-- 將父親的方法通過自定義事件傳給組件2使用 -->
        <son2 @custom='faToggle'></son2>
      </div>
      <hr>
      <!-- 組件1 -->
      <template id='son1'>
        <div>
           這里是組件1
           <div class='test' v-show='show'>
    
           </div>
        </div>
      </template>
     <!-- 組件2 -->
     <template id='son2'>
      <div>
         這里是組件2
         <button @click='son2Click'>顯示隱藏</button>
      </div>
    </template>
    <script>
    /*
    組件1 和組件2 是兄弟
    組件1有div 可以顯示隱藏
    組件2 有butoon 控制顯示隱藏
    
    控制顯示隱藏的值放在公有的爸爸上
    */ 
    Vue.component('son1',{
      template:'#son1',
      props:['show']  //接受爸爸傳來的數(shù)據(jù)
    })
    Vue.component('son2',{
      template:'#son2',
      methods: {
        son2Click(){
          this.$emit('custom') //觸發(fā)爸爸傳來的函數(shù)
        }
      },
    })
    let vm1 = new Vue({
      el:'#app1',
      data:{
        state:false
      },
      methods: {
        faToggle(){
          this.state=!this.state
        }
      },
    })
    

• 事件總線

  • 事件總線的原理 類似于 觀察者模式 事件拋發(fā)機制 也有叫天使實例的

    1. 創(chuàng)建一個空實例 作為橋梁

    2. 因為組件中.只有自己才能夠處理自己的數(shù)據(jù).所以給自己添加個虛擬的處理數(shù)據(jù)的事件

       1. 通過 $on 在把組件中的事件在空實例上注冊

    3. 在任何地方 只要能獲取到空實例 那就可以通過 $emit 方法觸發(fā)事件

  • 整個鏈條是son1的事件==空實例==son2中的事件

      <div id="app">
        <son1></son1>
        <hr>
        <son2></son2>  
      </div>
      <!-- 組價1的模板 -->
      <template lang="" id='son1'>
        <div>
          這里是組件1 
          <button @click ='change'>toggle</button>
        </div>
      </template>
      <!-- 組價2的模板 -->
      <template lang="" id='son2'>
      <div>
        這里是組件2 
        <div class="test" v-if='show'></div>
      </div>
    </template>
    <script>
    
    let vue = new Vue() //創(chuàng)建一個空實例 
    let son1 = Vue.component('son1',{
      template:'#son1',
      methods:{
        change(){
          console.log('空實例',vue)
          // 將son1的點擊事件和vue的hehe點擊事件綁定
          vue.$emit('hehe')
        }
      }
    })
    // 組件里的數(shù)據(jù)只有自己能改變.所以先給自己添加一個修改數(shù)據(jù)的點擊事件.
    let son2 = Vue.component('son2',{
      template:'#son2',
      data(){
        return{
          show:false
        }
      },
      methods: {
        toggle(){
          this.show=!this.show
        }
      },
      //將組件2的點擊事件注冊到vue上.
      mounted() {
        // 組件從虛擬dom變成真實dom 的時刻會自動執(zhí)行的函數(shù)
        console.log('組件二掛載')
        vue.$on('hehe',this.toggle)
        // 將toggle方法注冊到 vue空實例的上 名字叫hehe
      },
    })
    let vm=new Vue({
      el:"#app"
    })
    

• 全局狀態(tài)管理