之前學習了組件通信的6中方式
1-props：使用場景：【父組件給子組件傳遞數據】
傳遞數據類型：
可能是函數：實質是子組件想給父組件傳遞數據；
可能不是函數：實質就是父組件給子組件傳遞數據

特殊情況：路由傳遞props
1:布爾值類型，把路由中params參數映射為組件props數據
2:對象，靜態(tài)數據，很少用
3:函數，可以把路由中params|query參數映射為組件props數據

2-自定義事件??$emit $on
事件:原生DOM事件----【click|mouseenter........】
事件：自定義事件-----【子組件給父組件傳遞數據】

3-$bus 全局事件總線
組件實例的原型的原型指向的Vue.prototype

4-pubsub-js【發(fā)布訂閱消息】
*在vue中根本不用【React】 ----萬能

5-Vuex[倉庫] -----數據非持久化
state mutations actions getters modules

6-插槽-----父子通信【結構】
默認插槽
具名插槽
作用域插槽:子組件的數據來源于父組件，但是子組件的自己的結構有父親決定。

1-event事件深入探討

組件綁定原生DOM事件，并非原生DOM事件，而是所謂的自定義事件。如果你想把自定義事件變?yōu)樵鶧OM事件，需要加上修飾符.native修飾這個修飾符，可以把自定義事件【名字：原生DOM類型的】變?yōu)樵鶧OM事件。

比如組件Event1綁定了click事件，
<Event1 @click="handler1"></Event1>，
但是這個click事件不是我們理解的原生click事件，而是一個自定義事件。如果需要編程原生的click事件，需要加上修飾符.native。
<Event1 @click.native="handler1"></Event1>

?

?

2-v-model實現組件通信

v-model：指令，可以收集表單數據【text、radio、checkbox、range】等等
切記：v-model收集checkbox需要用數組收集

v-model:實現原理 :value @input

?上面兩種寫法效果是一樣的。當然:value @input也可以實現父子數據同步。?

?

?3-屬性修飾符.sync

屬性修飾符.sync，可以實現父子數據同步。在elementUI組件中出現，實現父子數據同步。?給子組件綁定一個自定義事件,事件的名字為update:money（必須取是這個名字）

?

?以上寫了一堆邏輯，其實可以使用sync來實現

? 4-$attrs和$?listeners

$attrs：組件實例的屬性，可以獲取到父親傳遞的props數據（前提子組件沒有通過props接受）$listeners：組件實例的屬性，可以獲取到父親傳遞自定義事件（對象形式呈現）。

?

需要注意一點，由于title我們已經使用了props接受，所以在控制臺this.$attrs中不會再出現title屬性。

5-$children和$parent

ref:可以在父組件內部獲取子組件---實現父子通信
$children:可以在父組件內部獲取全部的子組件【返回數組】
$parent:可以在子組件內部獲取唯一的父組件【返回組件實例】

?ref使用場景：
當點擊 "找小明借錢100"按鈕的時候，baba的存款+100，小明的存款減去100；同樣找小紅借150元，baba的存款+150，小紅的存款減去150；同樣的套路可以寫一份。

?

?

$children:使用場景：找 點擊 "找所有的孩子借錢200"。

?$parent:可以在點擊"給baba錢50"按鈕中使用

?
如果項目中很多JS的邏輯相似，可以使用mixin。比如本實例當中，兒子組件和女兒組件中都有給baba多少錢，邏輯一樣，所以我們可以抽取mixin來處理。同樣在兒子組件和女兒組件使用mixin來引入使用就行。

?

?

6-插槽

作用域插槽:子組件的數據來源于父組件，但是子組件的自己的結構有父親決定。
?

?

?src\pages\Communication\ScopeSlotTest\defSlot.vue

<template>
  <div>
      <h1>作用域插槽</h1>
      <List :todos="todos">
        <template v-slot="{todo,$index}">
            <h1 :style="{color:todo.isComplete?'red':'cyan'}">{{todo.text}}----{{$index}}</h1>
        </template>
      </List>
      <h1>默認插槽</h1>
      <Test><template><a >百度</a></template></Test>
      <Test><template><div>輪播圖的結構</div></template></Test>
      <div>*************************************</div>
      <Test1>        
         <template><p style="color:red;">我是填坑的爸爸---默認插槽</p></template><!-- 默認插槽 -->  
         <!-- #fbb其實就是slot='fbb' 簡寫方式,具名插槽的簡寫方式 -->       
         <template #fbb><p style="color:cyan;">我是填坑的爸爸---將來具名插槽---fbb</p></template><!-- 具名插槽 -->
         <!-- #fcc其實就是slot='fcc' 簡寫方式,具名插槽的簡寫方式 -->
         <template #fcc><p style="color:blue;">我是填坑的爸爸---將來具名插槽---fcc</p></template>
      </Test1>
  </div>
</template>

<script type="text/ecmascript-6">
  import List from './List'
  import Test from './Test'
  import Test1 from './Test1'
  export default {
    name: 'ScopeSlotTest',
    data () {
      return {
        todos: [
          {id: 1, text: 'AAA', isComplete: false},{id: 2, text: 'BBB', isComplete: true},
          {id: 3, text: 'CCC', isComplete: false},{id: 4, text: 'DDD', isComplete: false},
        ]
      }
    },
    components: {
      List,Test,Test1 
    }
  }
</script>

src\pages\Communication\ScopeSlotTest\List.vue

<template>
  <ul>
    <li v-for="(todo,index) in todos" :key="todo.id">
           <!-- 作用于插槽的使用 -->
           <!-- 下面寫法起始不是props,就是作用域插槽的語法,將數據回傳給父組件 -->
          <slot :todo="todo" :$index="index"></slot>
    </li>
  </ul>
</template>

<script>
export default {
  name:?'List',
  props: {
    todos: Array
  }
}
</script>

src\pages\Communication\ScopeSlotTest\Test\index.vue

<template>
  <div>
       <pre>學習-默認插槽</pre>
       <h1>我喜歡張杰的歌曲</h1>
       <!--
            slot,本身即為插槽，slot是一個全局組件、默認插槽
            底下相當于子組件留了一個'大坑'
        -->
       <slot></slot>
  </div>
</template>

<script>
export default {
  name: '',
}
</script>

<style scoped>

</style>

src\pages\Communication\ScopeSlotTest\Test1\index.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-433842.html

<template>
  <div>
      <pre>具名插槽</pre>
      <!-- 默認插槽:只能有一個-->
      <slot></slot>
      <!--具名插槽:可以有N個 -->
      <slot name="fbb"></slot>
      <slot name="fcc"></slot>
  </div>
</template>

<script>
export default {
  name: '',
}
</script>

<style scoped>

</style>

到了這里，關于vue組件通信方式匯總的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！