想實(shí)現(xiàn)一個(gè)展開單選組件
選擇不同項(xiàng)時(shí)更改列表項(xiàng)排列
于是我很快寫了一個(gè)組件
<template>
<div>
<span class="expand-select-list">
<label style="color: #999;float: left;margin: 6px 10px 0 0;">{{title}}</label>
<ul class="bi-nav-pills">
<li
v-for="(item,index) in selectTypes"
:key="index"
v-bind:class="{active: item.value==optionValue}"
v-on:click="onSelect(item)"
>{{item.name}}</li>
</ul>
</span>
</div>
</template>
<script>
export default {
data() {
return {
};
},
props: ["title","selectTypes"],
methods: {
onSelect(item) {
this.optionValue = item.value;
this.$emit("change:type", item.value);
}
},
mounted(){
this.optionValue=this.selectTypes[0].value
}
}
</script>
title 該組件的名稱 selectTypes 選擇的每一項(xiàng)畴蒲。
當(dāng)我測(cè)試點(diǎn)擊的時(shí)候 發(fā)現(xiàn)active類沒(méi)有發(fā)生綁定笤闯。
開始找原因
- f12看頁(yè)面發(fā)現(xiàn)dom也沒(méi)有掛載這個(gè)類名懈词。
active類是公共樣式里的類名，會(huì)不會(huì)不能在我這個(gè)組件引用。
于是我改成
v-bind:class="active"
這下綁定了，說(shuō)明我的類名沒(méi)問(wèn)題
- 這里出了問(wèn)題 點(diǎn)擊事件引起
this.optionValue = item.value;
duggber后發(fā)現(xiàn)數(shù)據(jù)改變了粱哼，數(shù)據(jù)是沒(méi)問(wèn)題的，但是頁(yè)面沒(méi)更新檩咱。 - 直到看到控制臺(tái)的警告
hhh.png
-------天哪這里的optionValue不是響應(yīng)式綁定的揭措，沒(méi)有添加進(jìn)data里胯舷，數(shù)據(jù)是改變了，但Vue根本不會(huì)理你绊含。
看這張圖
68747470733a2f2f636e2e7675656a732e6f72672f696d616765732f646174612e706e67.png
看了染陌大神的learnVue
我的理解就是
1.因?yàn)関ue沒(méi)有把數(shù)據(jù)optionValue添加進(jìn)一開始響應(yīng)式綁定里桑嘶，沒(méi)有對(duì)getter，setter重寫
2.更不會(huì)在渲染的時(shí)候收集render里的數(shù)據(jù)添加進(jìn)deps依賴收集容器里躬充。
3.數(shù)據(jù)改變不會(huì)觸發(fā)setter逃顶，數(shù)據(jù)option Value自己watch不到自己的改變，不會(huì)notify到充甚，不會(huì)觸發(fā)自己的updata以政，沒(méi)有相應(yīng)的回調(diào)通知組件重新渲染的函數(shù)。
關(guān)于vue的wanning
1.在vue的生命周期created的時(shí)候會(huì)完成數(shù)據(jù)的裝載伴找。vue實(shí)例的數(shù)據(jù)對(duì)象data有了盈蛮，$el還沒(méi)有。
2.在beforemounted會(huì)首次調(diào)用render方法技矮，解析template模板抖誉。渲染的時(shí)候發(fā)現(xiàn)沒(méi)有optionValue發(fā)出警告。
3.數(shù)據(jù)視圖都準(zhǔn)備好組件開始掛載衰倦，mounted掛載好在vue data之外的數(shù)據(jù)不會(huì)添加進(jìn)響應(yīng)式綁定中寸五，所以視圖不會(huì)改變。
- 這時(shí)應(yīng)該這樣修改
data() {
return {
optionValue:this.selectTypes[0].value
};
},
附上vue生命周期圖
