vue 資料通訊總結
資料單向流動prop react也是一樣prop
1.prop / $emit (常用父子元件傳遞)
//父傳給子
<child :title="title"></child>
//子通過props接收
export default {
name: 'demo',
data: function() {},
props: {
title: {
type: String
}
},
};
//子傳給父
methods: {
childTitle() {
this.$emit('changeTitle', `我給父元件的第${this.key}次`);
}
}
};
//父接收
<child @changeTitle="parentTitle"></child> //自定義事件
2. $emit / $on（任意元件間傳遞）
建立個空的元件，來作eventbus用來觸發及監聽事件
// 父元件
<template>
<div class="container">
<child1 :Event="Event"></child1>
<child2 :Event="Event"></child2>
<child3 :Event="Event"></child3>
</div>
</template>
<script>
const 可以任意傳。 思想類似傳物件給子元件，在子元件裡修改物件的屬性 父元件裡的跟著響應
3.vuex 牛刀
集中式儲存管理應用的所有元件的狀態。
Vuex 實現了一個單項資料流，通過建立一個全域性的 State 資料，元件想要修改 State 資料只能通過 Mutation 來進行，頁面上的操作想要修改 State 資料時，需要通過 Dispatch (觸發 Action )，而 Action 也不能直接操作資料，還需要通過 Mutation 來修改 State 中資料，最後根據 State 中資料的變化，來渲染頁面
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment(state) {
state.count++;
},
reduce(state) {
state.count--;
}
},
actions: {
actIncrement({ commit }) {
commit('increment');
},
actReduce({ commit }) {
commit('reduce');
}
},
getters: {
doubleCount: state => state.count*2
}
});
//vue例項
export default {
name: "demo",
data: function() {
return {};
},
components: {},
props: {},
computed: {
...mapState(["count"]),
...mapGetters(["doubleCount"])
},
methods: {
...mapActions(["actIncrement", "actReduce"])
}
};4.$attrs / $listeners
vue2.4後的新方法，加強props。
$attrs： 包含了父作用域中不作為 Prop 被識別 (且獲取) 的特性繫結(Class 和 Style 除外)。當一個元件沒有宣告任何 Prop 時，這裡會包含所有父作用域的繫結 (Class 和 Style 除外)，並且可以通過 v-bind="$attrs" 傳入內部元件——在建立高級別的元件時非常有用
$listeners： 包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部元件
//父元件
<button style="backgroundColor:lightgray" @click="reduce">減dd</button>
<child1 :aa="aa" :bb="bb" :cc="cc" :dd="dd" @reduce="reduce"></child1>
// 子元件1
<template>
<div>
<div class="center">
<p>aa:{{aa}}</p>
<p>child1的$attrs:{{$attrs}}</p>
<button @click="this.reduce1">元件1減dd</button>
</div>
<child2 v-bind="$attrs" v-on="$listeners"></child2> //寫法
</div>
</template>
//子元件1的子元件也可以獲得子元件1的父元件的屬性和監聽
簡單來說，$attrs 裡存放的是父元件中繫結的非 props 屬性，$listeners 裡面存放的是父元件中繫結的非原生事件。 解決一級一級prop的痛點
5.Provider / Inject 需要一起使用
vue2.2新增的API。允許一個祖先元件向其所有子孫注入一個依賴，不論元件層級多深，在其上下游關係成立的時間裡始終生效
// 父元件
<template>
<div class="container">
<button @click="this.changeName">我要改名字了</button>
<p>我的名字：{{name}}</p>
<child1></child1>
</div>
</template>
<script>
export default {
name: 'demo',
data: function() {
return {
name: '節能'
};
},
// provide() {
// return {
// name: this.name //這種繫結方式是不可響應的 ！注意！
// };
// },
provide() {
return {
obj: this //繫結物件
};
},
components: {
Child1
},
methods: {
changeName() {
this.name = '節能晚上';
}
}
};
</script>
// 子元件
<template>
<div>
<div class="center">
<!-- <p>子元件名字:{{name}}</p> -->
<p>子元件名字:{{this.obj.name}}</p>
</div>
<child2></child2>
</div>
</template>
<script>
export default {
name: 'demo1',
data() {
return {};
},
props: {},
// inject: ["name"], //這種方式注入，改變了name是 非響應式的，
inject: { //這種注入 是響應式的。
obj: {
default: () => {
return {};
}
}
},
components: {
child2
},
};
</script>
簡單來說，就是父元件通過 Provider 傳入變數，任意子孫元件通過 Inject 來拿到變數。Provide 和 Inject 繫結並不是可響應的。然而，如果你傳入了一個可監聽的物件，那麼其物件的屬性還是可響應的.這是js物件引用型別的原故
資源搜尋網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com
6.$parent / $children & $refs
$parent / $children： 指定已建立的例項之父例項，在兩者之間建立父子關係。子例項可以用 this.$parent 訪問父例項，子例項被推入父例項的 $children 陣列中 。
$refs： 一個物件，持有註冊過 ref 特性的所有 DOM 元素和元件例項。ref 被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的 $refs 物件上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子元件上，引用就指向元件。