Vue 組件化通訊 provide & inject ,dispatch ,boardcast

入門

做爲前端最容易上手的框架，Vue入門其實沒啥說的，我放一段清單的代碼，你們能看懂就說明能上手了javascript

css<template>
  <div id="app"> <h1>{{title}}</h1> <div> <input type="text" v-model="val"> <button @click="add">添加</button> <button @click="clear">清空</button> </div> <ul> <li v-for="todo in todos" :key="todo.title" :class="{done:todo.done}"> <input type="checkbox" v-model="todo.done"> {{todo.title}} </li> </ul> <p>{{active}} / {{all}}</p> </div> </template> 複製代碼<script> export default { name: "app", data() { return { title: "蝸牛老溼很騷氣", val: "", todos: [] }; }, mounted() { const todos = localStorage.getItem("todos"); if (todos) { this.todos = JSON.parse(todos); } else { this.todos = [ { title: "吃飯", done: true }, { title: "睡覺", done: false }, { title: "寫代碼", done: false } ]; } }, computed: { active() { return this.todos.filter(v => !v.done).length; }, all() { return this.todos.length; } }, watch: { todos: { deep: true, handler(todos) { localStorage.setItem("todos", JSON.stringify(todos)); } } }, methods: { clear() { this.todos = this.todos.filter(v => !v.done); }, add() { if (this.val) { this.todos.push({ title: this.val, done: false }); this.val = ""; } } } }; </script> <style> li.done { color: red; text-decoration: line-through; } </style> 複製代碼複製代碼

大概包含的內容以下，對這個例子熟悉後，纔是咱們的正文，若是上面代碼有沒看懂的地方，快去Vuejs官網回顧一下吧html

變量渲染
循環渲染
class渲染
計算屬性
監聽器
綁定事件
生命週期

組件化

Vue單文件組件。Vue的單文件組件相信你們都體驗過，經過vue-cli初始化的項目自動就支持了，新建Child1.vue前端

java
<template>
    <div>Child1</div>
</template>
<script> export default { } </script>vue
 複製代碼複製代碼複製代碼

App中使用git

<template>
  <div id="app">
    <Child1></Child1>
  </div>
</template>

<script> import Child1 from '@/components/Child1' export default { name: "app", components:{Child1} } </script>
複製代碼複製代碼

下面就迎來了第一個常見問題，若是組件多了，他們之間如何通訊嘮嗑呢，不要小看這個問題，騷氣的面試官，好比我，就常常喜歡問，下面咱們來演示一下Vue組件之間經常使用的通訊收件github

1. 父傳子組件

父子組件傳值，最簡單的就是經過props傳遞，話很少說看代碼面試

// App
<template>
  <div id="app">
    <Child1 :title="title1"></Child1>
  </div>
</template>
<script> import Child1 from '@/components/Child1' export default { name: "app", data(){ return { title1:'我是你爸爸' } }, components:{Child1}vuex
複製代碼} </script> 複製代碼複製代碼

// Child1
<template>
<div>
<h2>Child2</h2>
<div>{{title}}</div>
</div>
</template>
<script> export default { props:['title']
 } </script>
 複製代碼複製代碼複製代碼

2. 子傳父

Vue更推薦單向數據流，因此子組件像修改傳遞的數據，須要通知父組件來修改，使用$emit觸發父元素傳遞的事件


<template>
  <div id="app">
    <h2>Parent</h2>
    <h3>{{msg}}</h3>
    <Child1 :title="title1" @getmsg="getmsg"></Child1>
  </div>
</template>
<script> import Child1 from '@/components/Child1' export default { name: "app", data(){ return { msg:'', title1:'我是你爸爸' } }, methods:{ getmsg(msg){ console.log(msg) this.msg = msg } }, components:{Child1}
}
</script> <style>
複製代碼div{ border:1px red solid; padding:20px; } </style> 複製代碼複製代碼

// child1
<template>
<div>
<h2>Child2</h2>
<p>{{title}}</p>
<button @click="toParent">傳遞到父元素</button>
</div>
</template>
<script> export default { props:['title'], methods:{ toParent(){ this.$emit('getmsg','爸爸,我知道錯了') } }
 複製代碼} </script> 複製代碼複製代碼

3. 兄弟組件

兄弟組件不能直接通訊，只須要父元素搭個橋便可，你們本身體驗便可

4. 祖前後代 provide & inject

props一層層傳遞，爺爺給孫子還好，若是嵌套了五六層還這麼寫，感受本身就是一個沙雕，因此這裏介紹一個稍微冷門的API， provice/inject,相似React中的上下文，專門用來跨層級提供數據

如今不少開源庫都使用這個api來作跨層級的數據共享，好比element-ui的tabs 和 select


<script> import Child1 from '@/components/Child1' export default { name: "app", provide:{ woniu:'我是蝸牛' }, components:{Child1}
}
複製代碼</script> <style> 複製代碼複製代碼

// 子孫元素
<template>
<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Grandson1<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
        祖先元素提供的數據 : {{woniu}}
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
複製代碼
</template> <script> export default {
<span class="hljs-attr">inject</span>:[<span class="hljs-string">'woniu'</span>]
複製代碼
複製代碼<span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Grandson1<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
    <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>
        祖先元素提供的數據 : {{woniu}}
    <span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
複製代碼<span class="hljs-attr">inject</span>:[<span class="hljs-string">'woniu'</span>]
複製代碼} </script> 複製代碼複製代碼

可是provider和inject不是響應式的，若是子孫元素想通知祖先，就須要hack一下，Vue1中有dispatch和boardcast兩個方法，可是vue2中被幹掉了，咱們本身能夠模擬一下

原理就是能夠經過this.children來獲取父組件和子組件，咱們遞歸一下就能夠了

5. dispatch

遞歸獲取$parent便可比較簡單

<button @click="dispatch('dispatch','哈嘍 我是GrandGrandChild1')">dispatch</button>
複製代碼複製代碼

methods: {
dispatch(eventName, data) {
  <span class="hljs-keyword">let</span> parent = <span class="hljs-keyword">this</span>.$parent
  <span class="hljs-comment">// 查找父元素</span>
  <span class="hljs-keyword">while</span> (parent ) {
    <span class="hljs-keyword">if</span> (parent) {
      <span class="hljs-comment">// 父元素用$emit觸發</span>
      parent.$emit(eventName,data)
      <span class="hljs-comment">// 遞歸查找父元素</span>
      parent = parent.$parent
    }<span class="hljs-keyword">else</span>{
      <span class="hljs-keyword">break</span>

    }
  }

}
複製代碼
複製代碼dispatch(eventName, data) {
  <span class="hljs-keyword">let</span> parent = <span class="hljs-keyword">this</span>.$parent
  <span class="hljs-comment">// 查找父元素</span>
  <span class="hljs-keyword">while</span> (parent ) {
    <span class="hljs-keyword">if</span> (parent) {
      <span class="hljs-comment">// 父元素用$emit觸發</span>
      parent.$emit(eventName,data)
      <span class="hljs-comment">// 遞歸查找父元素</span>
      parent = parent.$parent
    }<span class="hljs-keyword">else</span>{
      <span class="hljs-keyword">break</span>

    }
  }

}
複製代碼} 複製代碼複製代碼

注意只向上傳遞了，並無影響別的元素

6. boardcast

和dispatch相似，遞歸獲取$children 來向全部子元素廣播

<button @click="$boardcast('boardcast','我是Child1')">廣播子元素</button>
複製代碼複製代碼


function boardcast(eventName, data){
  this.$children.forEach(child => {
    // 子元素觸發$emit
    child.$emit(eventName, data)
    if(child.$children.length){
      // 遞歸調用，經過call修改this指向 child
      boardcast.call(child, eventName, data)
    }
  });
}
{
  methods: {
$boardcast(eventName, data) {
  boardcast.call(<span class="hljs-keyword">this</span>,eventName,data)
}
複製代碼
複製代碼$boardcast(eventName, data) {
  boardcast.call(<span class="hljs-keyword">this</span>,eventName,data)
}
複製代碼} } 複製代碼複製代碼

7. 全局掛載dispatch和boardcast

想用的時候，須要本身組件內部定理dispatch和boardcast太煩了，咱們掛載到Vue的原型鏈上，豈不是很high,找到main.js


Vue.prototype.$dispatch =  function(eventName, data) {
  let parent = this.$parent
  // 查找父元素
  while (parent ) {
    if (parent) {
      // 父元素用$emit觸發
      parent.$emit(eventName,data)
      // 遞歸查找父元素
      parent = parent.$parent
    }else{
      break
    }
  }
}
Vue.prototype.children.forEach(child => { // 子元素觸發emit(eventName, data) if(child.$children.length){ // 遞歸調用，經過call修改this指向 child boardcast.call(child, eventName, data) } }); }
複製代碼複製代碼複製代碼

這樣組件裏直接就能夠用了無壓力

8. 沒啥關係的組件：event-bus

若是倆組件沒啥關係呢，咱們只能使用訂閱發佈模式來作，而且掛載到Vue.protytype之上，咱們來試試，咱們稱呼這種機制爲總線機制，也就是喜聞樂見的 event-bus


class Bus{
  constructor(){
    // {
    // eventName1:[fn1,fn2],
    // eventName2:[fn3,fn4],
    // }
    this.callbacks = {}
  }
  $on(name,fn){
    this.callbacks[name] = this.callbacks[name] || []
    this.callbacks[name].push(fn)
  }
  $emit(name,args){
    if(this.callbacks[name]){
      // 存在 遍歷全部callback
      this.callbacks[name].forEach(cb=> cb(args))
    }
  }
}
複製代碼Vue.prototype.$bus = new Bus() 複製代碼複製代碼

使用

// 使用
eventBus(){
    this.$bus.$emit('event-bus','測試eventBus')
}

// 監聽
this.$bus.$on("event-bus",msg=>{
    this.msg = '接收event-bus消息:'+ msg
})
複製代碼複製代碼

其實自己Vue就是一個訂閱發佈的實現，咱們偷個懶，把Bus這個類能夠刪掉，新建一個空的Vue實例就能夠啦

Vue.prototype.$bus = new Vue()
複製代碼複製代碼