Vue2组件间通信
文章目錄
- Vue2組件間通信
- 1.組件間通信
- props
- 自定義事件
- 全局事件總線$bus
- pubsub.js,在React框架中使用比較多，(發布與訂閱)
- Vuex
- 插槽
- 2.進階組件間通信
- 1)事件相關的深入學習
- 2)v-model實現組件通信？
- 3)屬性修飾符.sync，可以實現父子數據同步。
- 4)`$attrs與$listeners` ----vue-helper 父子組件通信
- 5)`$children與$parent` 可以實現父子組件通信
- 6)作用域插槽
Vue2組件間通信
1.組件間通信
props
- 父子通信
- 傳遞函數，子組件給父組件傳遞數據
- 傳遞數據，父組件給子組件傳遞數據
- 接收：三種寫法['tools'],{tools:Array},{tools:{type:Array,default:[],require:true}}
- 路由的props
- 布爾值，把路由中params參數映射為組件props數據
- 對象，靜態數據，很少用
- 函數形式，可以把路由中params|query參數映射為組件props數據
自定義事件
使用場景：子組件給父組件傳遞數據
- on[簡寫@]和on[簡寫@]和on[簡寫@]和emit
- 事件:原生DOM事件----【click|mouseenter…】
- 事件：自定義事件-----[子給父傳遞數據]
全局事件總線$bus
適用場景:萬能
Vue.prototype.$bus = this
pubsub.js,在React框架中使用比較多，(發布與訂閱)
適用場景:萬能
Vuex
- 數據非持久化
- 適用場景:萬能
-
核心概念：5
-
state
-
mutations
-
actions
-
getters
-
modules
-
插槽
適用場景:父子間組件通信 —(一般結構)
-
默認插槽
-
具名插槽
-
作用域插槽
2.進階組件間通信
1)事件相關的深入學習
-
事件:事件已經學習過兩種，第一種原生DOM事件，第二種自定義事件。
-
組件綁定原生DOM事件，并非原生DOM事件，而是所謂的自定義事件。
-
如果你想把自定義事件變為原生DOM事件，需要加上修飾符.native修飾
-
這個修飾符(.native)，可以把自定義事件【名字：原生DOM類型的】變為原生DOM事件，
2)v-model實現組件通信？
- v-model：指令，可以收集表單數據【text、radio、checkbox、range】等等
- 切記：v-model收集checkbox需要用數組收集
v-model:實現原理 :value @input 還可以實現父子數據同步。
<CustomInput v-model="msg"></CustomInput>
相當于： <CustomInput :value="msg" @input="msg = $event"></CustomInput> 子組件觸發的自定義事件必須是input,子代接收的props是value，否則v-model 不生效
子組件寫法:<input :value="value" @input="$emit('input',$event.target.value)"/>
- $event可以作為子組件觸發自定義事件傳回來的參數
子組件
<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，可以實現父子數據同步。
- 以后在elementUI組件中出現，實現父子數據同步。
- 和v-model實現組件通信類似
- 可以實現父子組件數據同步，該案例在子組件綁定自定義事件（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：組件實例的屬性，可以獲取到父親傳遞的props數據（前提子組件沒有通過props接收）
- $listeners：組件實例的屬性，可以獲取到父親傳遞自定義事件（對象形式呈現）
- v-bind 可以直接賦予他一個對象，會把這些對象作為標簽的屬性
- v-for 可以直接賦予他一個對象，會把這些對象作為標簽的事件，屬性值需要為函數
- 以上兩種用法不可以簡寫
子組件
<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:可以獲取到父親傳遞的數據【props】//this.$attrs是可以獲取父親傳遞的props數據，如果子組件通過//props:[],接受，this.$attrs屬性是獲取不到的console.log(this.$attrs);console.log(this.$listeners);}, }; </script><style scoped></style>5)$children與$parent 可以實現父子組件通信
- ref:可以在父組件內部獲取子組件—實現父子通信【可以使用子組件的數據和方法】
- $children:可以在父組件內部獲取全部的子組件【返回數組】
- $parent:可以在子組件內部獲取唯一的父組件【返回組件實例】
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"><!-- 坑：熊孩子挖到坑，父親填坑 --><!-- 數據來源于父親：但是子組件決定不了結構與外網--><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"><!-- 坑：熊孩子挖到坑，父親填坑 --><!-- 數據來源于父親：但是子組件決定不了結構與外網--><slot :row="todo" :index="index "></slot></li></ul> </template><script> export default {name: 'List1',props: {data: Array} } </script>總結
- 上一篇： yii2简单实现redis消息队列
- 下一篇： axure内联框架和动态面板_Axure