對Vue元件通訊的理解

你什麼都不懂發表於2018-08-26
Vue元件

元件通訊的方式

父子通訊

方式一:props

對Vue元件通訊的理解
上圖可以理解為兩個過程:

1.pass props是父=>子傳遞資料,這個過程中props作為一個載體,將自定義的一些特性傳遞給子元件.

--html
<blog-post message="hello!"></blog-post>

--js
Vue.component('blog-post', {
 props: ['message'],
 template: '<h3>{{ message }}</h3>'
})

複製程式碼

父級 prop 的更新會向下流動到子元件中,e官方文件中稱為單向資料繫結,這個過程中,子元件只能單向的獲取到父級定義的值, 父元件修改資料之後,子元件中的props也會跟這重新整理為最新的值.

props 可以接受任何型別的值傳遞到子元件,包括:

string,

number,

booler,

object,

function

方式二:events

元件自定義事件，父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件

<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>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})
複製程式碼

兄弟通訊

兩個平級的元件之間需要通訊傳遞一些事件,則需要我們建立一個第三方Vue例項,來承載雙方通訊時所要進行的事件.

var Event=new Vue()  //作為第三方記錄事件

vue.component('aaa',{
data(){
    return{
        i_said:'',
    }
}
  tempate:`
    <div>
      <input @keyup="on_change" v-model="i_said">
    </div>   
  `,
  mothed:{
      on_change:function(){
          Event.$emit('aaa-said-somthing',this.i_said) //繫結事件,將aaa的輸入資料作為第二個引數傳遞出去
      }
  }
  
  vue.component('bbb',{
  tempate:`
    <div>
     aaa說:{{aaa_said}}
    </div>   
  `,
  data(){
      return{
          aaa_said:'',
      },
      mounted:funtion(){
      var me = this
          Event.$on('aaa_said',function(data){
              this.aaa_said=data
          })
      }
  }
})
複製程式碼

兄弟通訊的核心就在於擁有一個第三方排程器,通過它進行任意元件之間的通訊.

爺孫通訊

Vue.component('child', {
  props: ['visible'],
  template: `
  <div>我是兒子
      <sunzi v-show="visible" @close="$emit('close')"></sunzi>
  </div>
`
})
Vue.component('sunzi', {
  template: `
  <div>我是孫子 
    <button @click="$emit('close')">關閉</button>
  </div>
`
})
new Vue({
  el: '#app',
  data: {
    message: '我是爺爺',
    xxx: false
  },
  methods:{
    log(){
      console.log('爺爺知道了')
    }
  }
})
複製程式碼
<div id="app">
    <p>{{ message }}</p>
    <button @click="xxx=true">開啟</button>
    <child :visible="xxx" @close="xxx=false"></child>
  </div>
複製程式碼

這裡爺孫之間的通訊,只要依靠的是子元件的props,

嚴格意義上來講，沒有爺孫通訊，只有父子通訊，因為爺孫祖輩通訊，都可以看成是父子通訊。 直接使用props和$emit並不能直接通訊，但是爺爺可以和兒子通訊，兒子可以和孫子通訊，那麼可以把兒子當作中轉。

相關文章