前言
props實現(xiàn)父傳子
- 本文介紹子組件如何通過props獲得父組件data。
- 接著把父組件的消息分別放入子組件的data和computed，發(fā)現(xiàn)了不同的結(jié)果；
- 放入子組件的computed，也即思路①，是抽離子組件的正解。
- 子組件應(yīng)該使用
vm.$emit()觸發(fā)父組件的事件方法，第一個參數(shù)代表你選擇的事件方法，父組件應(yīng)擁有對應(yīng)的自定義v-on指令；第二個參數(shù)代表你想要傳過去的數(shù)據(jù)。
糾正：2、3點的描述是有問題的，當(dāng)時我還沒有研究清楚。應(yīng)為：不同的情況采用不同的策略，無論如何你不應(yīng)該試圖直接修改props:單向數(shù)據(jù)流。
- 這個 prop 用來傳遞一個初始值；這個子組件接下來希望將其作為一個本地的 prop 數(shù)據(jù)來使用。
- 這個 prop 以一種原始的值傳入且需要進(jìn)行轉(zhuǎn)換。在這種情況下，最好使用這個 prop 的值來定義一個計算屬性。
Vue如何實現(xiàn)組件間的通信
從組件間的關(guān)系可以分為4類通信手段：
-
父子組件間的通信： 使用屬性傳遞(props)，使用v-on通過事件通信。
-
v-on常運用自定義事件的寫法，父組件形如<train-city @showCityName="updateCity" :sendData="toCity"></train-city> - 子組件
<button @click='select(大連)'>點擊此處將‘大連’發(fā)射給父組件</button> - 子組件在事件方法
select中使用vm.$emit("showCityName"，data)達(dá)成通信（子傳父）
-
爺孫組件通信：使用provide, inject
任意組件間通信：使用
eventbus = new Vue()來通信，eventbus.$on和eventbus.$emit是主要API任意組件間通信：使用Vuex進(jìn)行通信
父子組件通信
- 父組件：通過props傳遞數(shù)據(jù)。（傳遞一個對象。）
- template中為子組件添加props
- js中聲明自己的data
- js中聲明自己的子組件
//@/component/parent.vue
<template>
<div id="parent">
<p>父：</p>
{{msg}}
<br>
{{msg2}}
<Child :parentMsg="{msg,msg2}"/>
</div>
</template>
<script>
import Child from "./child.vue";
export default {
data() {
return {
msg: "我是父組件的消息",
msg2: "誒，我也是",
};
},
components: {
Child
},
}
</script>
- 子組件
- 父組件中template怎么給子組件寫props, 子組件的js就照著引入。
//@/component/child.vue
<template>
<div id="child">
<p>子：</p>
{{parentMsg.msg}}
<br>
{{parentMsg.msg2}}
</div>
</template>
<script>
export default {
props: ["parentMsg"],
}
</script>
抽離子組件的思路
步驟A：修改父組件，添加一個修改父組件自己data的methods
步驟B：注釋掉子組件的data或者computed
- 思路有兩種，①存到子組件computed,以及②存到子組件data。
- 測試效果比較微妙：
- 思路①子組件跟著父組件data變化，
- 思路②則沒有跟隨變化。
- 不明白個中道理。
步驟C：給思路②作延申，給父組件data初始化msg和msg2，發(fā)現(xiàn)此延申下，子組件的數(shù)據(jù)是父組件最原始初始化的內(nèi)容。
//@/component/parent.vue
<template>
<div id="parent">
+ <button @click="bind1">我是父組件，要修改自己的data</button>
<p>父：</p>
{{msg}}
<br>
{{msg2}}
<Child :parentMsg="{msg,msg2}"/>
</div>
</template>
<script>
import Child from "./child.vue";
export default {
data() {
return {
msg: "我是父組件的消息",
msg2: "誒，我也是",
type: true
};
},
components: {
Child
},
+ methods: {
+ bind1() {
+ if (this.type) {
+ this.msg = "我被改變，而子組件不改變";
+ this.type = false;
+ } else {
+ this.msg = "我是父組件的消息";
+ this.type = true;
+ }
+ }
+ }
};
</script>
//@/component/child.vue
<template>
<div id="child">
<!-- {{parentMsg.msg}}<br>
{{parentMsg.msg2}}-->
<p>子：</p>
{{msg}}
<br>
{{msg2}}
</div>
</template>
<script>
export default {
props: ["parentMsg"],
+ data() {
+ return {
+ msg: this.parentMsg.msg,
+ msg2: this.parentMsg.msg2
+ };
+ }
+ // computed: {
+ // msg() {
+ // return this.parentMsg.msg;
+ // },
+ // msg2() {
+ // return this.parentMsg.msg2;
+ // }
+ // }
};
</script>
我的在線實例
總結(jié)
- 本文介紹子組件如何通過props獲得父組件data。
- 接著把父組件的消息分別放入子組件的data和computed，發(fā)現(xiàn)了不同的結(jié)果。
- 放入子組件的computed，也即思路①，是抽離子組件的正解。
參考
- 歲月如同馬匹：vue父子組件之間的通信
- vue文檔——Props
- vue中 關(guān)于$emit的用法
