Vue2组件间通信
文章目錄
- Vue2組件間通信
- 1.組件間通信
- props
- 自定義事件
- 全局事件總線$bus
- pubsub.js,在React框架中使用比較多，(發(fā)布與訂閱)
- Vuex
- 插槽
- 2.進(jìn)階組件間通信
- 1)事件相關(guān)的深入學(xué)習(xí)
- 2)v-model實(shí)現(xiàn)組件通信？
- 3)屬性修飾符.sync，可以實(shí)現(xiàn)父子數(shù)據(jù)同步。
- 4)`$attrs與$listeners` ----vue-helper 父子組件通信
- 5)`$children與$parent` 可以實(shí)現(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ù)
- 對(duì)象，靜態(tài)數(shù)據(jù)，很少用
- 函數(shù)形式，可以把路由中params|query參數(shù)映射為組件props數(shù)據(jù)
自定義事件
使用場(chǎng)景：子組件給父組件傳遞數(shù)據(jù)
- on[簡(jiǎn)寫@]和on[簡(jiǎn)寫@]和on[簡(jiǎn)寫@]和emit
- 事件:原生DOM事件----【click|mouseenter…】
- 事件：自定義事件-----[子給父?jìng)鬟f數(shù)據(jù)]
全局事件總線$bus
適用場(chǎng)景:萬(wàn)能
Vue.prototype.$bus = this
pubsub.js,在React框架中使用比較多，(發(fā)布與訂閱)
適用場(chǎng)景:萬(wàn)能
Vuex
- 數(shù)據(jù)非持久化
- 適用場(chǎng)景:萬(wàn)能
-
核心概念：5
-
state
-
mutations
-
actions
-
getters
-
modules
-
插槽
適用場(chǎng)景:父子間組件通信 —(一般結(jié)構(gòu))
-
默認(rèn)插槽
-
具名插槽
-
作用域插槽
2.進(jìn)階組件間通信
1)事件相關(guān)的深入學(xué)習(xí)
-
事件:事件已經(jīng)學(xué)習(xí)過兩種，第一種原生DOM事件，第二種自定義事件。
-
組件綁定原生DOM事件，并非原生DOM事件，而是所謂的自定義事件。
-
如果你想把自定義事件變?yōu)樵鶧OM事件，需要加上修飾符.native修飾
-
這個(gè)修飾符(.native)，可以把自定義事件【名字：原生DOM類型的】變?yōu)樵鶧OM事件，
2)v-model實(shí)現(xiàn)組件通信？
- v-model：指令，可以收集表單數(shù)據(jù)【text、radio、checkbox、range】等等
- 切記：v-model收集checkbox需要用數(shù)組收集
v-model:實(shí)現(xiàn)原理 :value @input 還可以實(shí)現(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 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，可以實(shí)現(xiàn)父子數(shù)據(jù)同步。
- 以后在elementUI組件中出現(xiàn)，實(shí)現(xiàn)父子數(shù)據(jù)同步。
- 和v-model實(shí)現(xiàn)組件通信類似
- 可以實(shí)現(xiàn)父子組件數(shù)據(jù)同步，該案例在子組件綁定自定義事件（update:money）
子組件
<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：組件實(shí)例的屬性，可以獲取到父親傳遞的props數(shù)據(jù)（前提子組件沒有通過props接收）
- $listeners：組件實(shí)例的屬性，可以獲取到父親傳遞自定義事件（對(duì)象形式呈現(xiàn)）
- v-bind 可以直接賦予他一個(gè)對(duì)象，會(huì)把這些對(duì)象作為標(biāo)簽的屬性
- v-for 可以直接賦予他一個(gè)對(duì)象，會(huì)把這些對(duì)象作為標(biāo)簽的事件，屬性值需要為函數(shù)
- 以上兩種用法不可以簡(jiǎn)寫
子組件
<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 可以實(shí)現(xiàn)父子組件通信
- ref:可以在父組件內(nèi)部獲取子組件—實(shí)現(xiàn)父子通信【可以使用子組件的數(shù)據(jù)和方法】
- $children:可以在父組件內(nèi)部獲取全部的子組件【返回?cái)?shù)組】
- $parent:可以在子組件內(nèi)部獲取唯一的父組件【返回組件實(shí)例】
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列表時(shí), 已完成的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列表時(shí), 帶序號(hào), TODO的顏色為藍(lán)綠搭配</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é)
- 上一篇： yii2简单实现redis消息队列
- 下一篇： 关于前端url加密方式总结 (Vue-c