文章目錄

• Vue2組件間通信
• • • • 1.組件間通信
      • • • props
          • 自定義事件
          • 全局事件總線$bus
          • pubsub.js,在React框架中使用比較多，(發(fā)布與訂閱)
          • Vuex
          • 插槽
      • 2.進階組件間通信
      • • • 1)事件相關(guān)的深入學(xué)習(xí)
          • 2)v-model實現(xiàn)組件通信？
          • 3)屬性修飾符.sync，可以實現(xiàn)父子數(shù)據(jù)同步。
          • 4)`$attrs與$listeners` ----vue-helper 父子組件通信
          • 5)`$children與$parent` 可以實現(xiàn)父子組件通信
          • 6)作用域插槽

Vue2組件間通信

1.組件間通信

props

• 父子通信
  • 傳遞函數(shù)，子組件給父組件傳遞數(shù)據(jù)
  • 傳遞數(shù)據(jù)，父組件給子組件傳遞數(shù)據(jù)
• 接收：三種寫法['tools'],{tools:Array},{tools:{type:Array,default:[],require:true}}
• 路由的props
  • 布爾值，把路由中params參數(shù)映射為組件props數(shù)據(jù)
  • 對象，靜態(tài)數(shù)據(jù)，很少用
  • 函數(shù)形式，可以把路由中params|query參數(shù)映射為組件props數(shù)據(jù)

自定義事件

使用場景：子組件給父組件傳遞數(shù)據(jù)

• $on[簡寫@]和$emit
• 事件:原生DOM事件----【click|mouseenter…】
• 事件：自定義事件-----[子給父傳遞數(shù)據(jù)]

全局事件總線$bus

適用場景:萬能

Vue.prototype.$bus = this

pubsub.js,在React框架中使用比較多，(發(fā)布與訂閱)

適用場景:萬能

Vuex

• 數(shù)據(jù)非持久化

• 適用場景:萬能

• 核心概念：5

  • state

  • mutations

  • actions

  • getters

  • modules

插槽

適用場景:父子間組件通信 —(一般結(jié)構(gòu))

• 默認插槽

• 具名插槽

• 作用域插槽

2.進階組件間通信

1)事件相關(guān)的深入學(xué)習(xí)

• 事件:事件已經(jīng)學(xué)習(xí)過兩種，第一種原生DOM事件，第二種自定義事件。

• 組件綁定原生DOM事件，并非原生DOM事件，而是所謂的自定義事件。

• 如果你想把自定義事件變?yōu)樵鶧OM事件，需要加上修飾符.native修飾

• 這個修飾符(.native)，可以把自定義事件【名字：原生DOM類型的】變?yōu)樵鶧OM事件，

<template><div><h1>EventTest組件</h1><!-- 原生DOM事件 --><button @click="handler">原生btn按鈕</button><!-- 使用Event1組件：底下這個組件 @click.native 原生DOM事件，利用事件的委派--><Event1 @click.native="handler1"></Event1><hr/><!-- 自定義事件對于原生DOM沒有任何意義 --><!-- <button @erha="handler3"> 原生的btn</button> --><Event2 @click="handler2" @xxx="handler2"></Event2><!-- 表單元素 color:選取顏色 range：范圍條 date：日歷 week--><input type="week" /></div> </template><script type="text/ecmascript-6">import Event1 from './Event1.vue'import Event2 from './Event2.vue'export default {name: 'EventTest',components: {Event1,Event2,},methods: {//原生DOM事件的回調(diào)handler(event){console.log(event);},handler1(){console.log('66666666');},handler2(params){console.log(params);}}} </script>

2)v-model實現(xiàn)組件通信？

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

v-model:實現(xiàn)原理 :value @input 還可以實現(xiàn)父子數(shù)據(jù)同步。
<CustomInput v-model="msg"></CustomInput>

相當(dāng)于： <CustomInput :value="msg" @input="msg = $event"></CustomInput> 子組件觸發(fā)的自定義事件必須是input,子代接收的props是value，否則v-model 不生效

子組件寫法:<input :value="value" @input="$emit('input',$event.target.value)"/>

• $event可以作為子組件觸發(fā)自定義事件傳回來的參數(shù)

<template><div><h2>深入v-model</h2><input type="text" v-model="msg"><span>{{msg}}</span><br><h2>深入v-model原理</h2><!-- 原生DOM當(dāng)中是有oninput事件：當(dāng)表單元素發(fā)生文本的變化的時候就會立即出發(fā) --><input type="text" :value="msg" @input=" msg = $event.target.value"/><span>{{msg}}</span><!--并非原生DOM：自定義組件--><CustomInput :value="msg" @input="msg = $event"></CustomInput> <!--$event是子組件觸發(fā)自定義事件傳回來的參數(shù)--><CustomInput v-model="msg"></CustomInput><hr></div> </template><script type="text/ecmascript-6">import CustomInput from './CustomInput.vue'export default {name: 'ModelTest',data() {return {msg:"我愛塞北的大雪呀"}},components: {CustomInput}} </script>

子組件

<template><div style="background: #ccc; height: 50px;"><h2>input包裝組件----{{value}}</h2><input :value="value" @input="$emit('input',$event.target.value)"/></div> </template><script type="text/ecmascript-6">export default {name: 'CustomInput',props:['value']} </script>

3)屬性修飾符.sync，可以實現(xiàn)父子數(shù)據(jù)同步。

• 以后在elementUI組件中出現(xiàn)，實現(xiàn)父子數(shù)據(jù)同步。
• 和v-model實現(xiàn)組件通信類似
• 可以實現(xiàn)父子組件數(shù)據(jù)同步，該案例在子組件綁定自定義事件（update:money）

<template><div>小明的爸爸現(xiàn)在有{{ money }}元<h2>不使用sync修改符</h2><Child :money="money" @update:money="money = $event"></Child><h2>使用sync修改符</h2><!-- --><Child :money.sync="money"></Child><hr /></div> </template><script type="text/ecmascript-6"> import Child from "./Child.vue"; import Child2 from "./Child2.vue"; export default {name: "SyncTest",data() {return {money: 10000,};},components: {Child,Child2,}, }; </script>

子組件

<template><div style="background: #ccc; height: 50px;"><span>小明每次花100元</span><button @click="$emit('update:money',money - 100)">花錢</button>爸爸還剩 {{money}} 元</div> </template><script type="text/ecmascript-6">export default {name: 'Child',props:['money']} </script>

4)$attrs與$listeners ----vue-helper 父子組件通信

• $attrs：組件實例的屬性，可以獲取到父親傳遞的props數(shù)據(jù)（前提子組件沒有通過props接收）
• $listeners：組件實例的屬性，可以獲取到父親傳遞自定義事件（對象形式呈現(xiàn)）
• v-bind 可以直接賦予他一個對象，會把這些對象作為標(biāo)簽的屬性
• v-for 可以直接賦予他一個對象，會把這些對象作為標(biāo)簽的事件，屬性值需要為函數(shù)
• 以上兩種用法不可以簡寫

<template><div><h2>自定義帶Hover提示的按鈕</h2><!-- 二次封裝的HintButton按鈕的時候，把人家el-button需要的數(shù)據(jù)傳遞過去 --><HintButtontype="success"icon="el-icon-plus"title="我是中國人"@click="handler"/></div> </template><script type="text/ecmascript-6"> import HintButton from "./HintButton"; export default {name: "AttrsListenersTest",components: {HintButton,},methods: {handler() {alert("彈彈彈");},}, }; </script>

子組件

<template><div><a :title="title"><el-button v-bind="$attrs" v-on="$listeners">添加</el-button></a></div> </template><script> export default {name: "",props: ["title"],mounted() {//this.$attrs:可以獲取到父親傳遞的數(shù)據(jù)【props】//this.$attrs是可以獲取父親傳遞的props數(shù)據(jù)，如果子組件通過//props:[],接受，this.$attrs屬性是獲取不到的console.log(this.$attrs);console.log(this.$listeners);}, }; </script><style scoped></style>

5)$children與$parent 可以實現(xiàn)父子組件通信

• ref:可以在父組件內(nèi)部獲取子組件—實現(xiàn)父子通信【可以使用子組件的數(shù)據(jù)和方法】
• $children:可以在父組件內(nèi)部獲取全部的子組件【返回數(shù)組】
• $parent:可以在子組件內(nèi)部獲取唯一的父組件【返回組件實例】

<template><div><h2>BABA有存款: {{ money }}</h2><button @click="JieQianFromXM(100)">找小明借錢100</button><br /><button @click="JieQianFromXH(150)">找小紅借錢150</button><br /><button @click="JieQianAll(200)">找所有孩子借錢200</button><br /><button @click="SendInfo">我是baba</button><br /><!-- 小明 --><Son ref="xm" /><br /><!-- 小紅 --><Daughter ref="xh"/></div> </template><script> import Son from "./Son"; import Daughter from "./Daughter";export default {name: "ChildrenParentTest",data() {return {money: 1000,};},methods: {//找兒子借錢JieQianFromXM(money) {//父組件的數(shù)據(jù)累加100this.money += money;this.$refs.xm.money -= money;},JieQianFromXH(money) {//父組件的數(shù)據(jù)累加150this.money += money;this.$refs.xh.money -= money;},JieQianAll(money){this.money += 2*money;this.$children.forEach(item=>item.money-=money);//不建議用枚舉獲取子組件：因為沒辦法確定到底是那個子組件// this.$children[0].money -=money;},SendInfo(){//在父組件中獲取到子組件（數(shù)據(jù)+方法）this.$refs.xm.tinghua();}},components: {Son,Daughter,}, }; </script><style></style>

Son

<template><div style="background: #ccc; height: 50px;"><h3>兒子小明: 有存款: {{money}}</h3><button @click="geiQian(50)">給BABA錢: 50</button></div> </template><script> export default {name: 'Son',data () {return {money: 30000}},methods: {tinghua(){console.log('我是小明，我聽爸爸的話');},geiQian(money){this.money-=money;this.$parent.money+=money;}} } </script>

Daughter

<template><div style="background: #ccc; height: 50px;"><h3>女兒小紅: 有存款: {{money}}</h3><button>給BABA錢: 100</button></div> </template><script> export default {name: 'Daughter',data () {return {money: 20000}},methods: {} } </script>

6)作用域插槽

<template><div><h2>效果一: 顯示TODO列表時, 已完成的TODO為綠色</h2><List :todos="todos"><!-- 書寫template --><template slot-scope="todo"><h5 :style="{color:todo.todo.isComplete?'green':'black'}">{{todo.todo.text}}</h5></template></List><List :todos="todos"><!-- 書寫template --><template slot-scope="todo"><a :style="{color:todo.todo.isComplete?'green':'black'}">{{todo.todo.text}}</a></template></List><hr><h2>效果二: 顯示TODO列表時, 帶序號, TODO的顏色為藍綠搭配</h2><List1 :data="todos"><template slot-scope="{row,index}"><h1 :style="{color:row.isComplete?'green':'hotpink'}">索引值{{index}}---------{{row.text}}</h1></template></List1></div> </template><script type="text/ecmascript-6">//子組件import List from './List'import List1 from './List1'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,List1 }} </script>

List

<template><ul><li v-for="(todo,index) in todos" :key="index"><!-- 坑：熊孩子挖到坑，父親填坑 --><!-- 數(shù)據(jù)來源于父親：但是子組件決定不了結(jié)構(gòu)與外網(wǎng)--><slot :todo="todo"></slot></li></ul> </template><script> export default {name: 'List',props: {todos: Array} } </script>

List1

<template><ul><li v-for="(todo,index) in data" :key="index"><!-- 坑：熊孩子挖到坑，父親填坑 --><!-- 數(shù)據(jù)來源于父親：但是子組件決定不了結(jié)構(gòu)與外網(wǎng)--><slot :row="todo" :index="index "></slot></li></ul> </template><script> export default {name: 'List1',props: {data: Array} } </script>

總結(jié)

以上是生活随笔為你收集整理的Vue2组件间通信的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。