想实现一个展开单选组件
未标题-1.jpg
选择不同项时更改列表项排列
于是我很快写了一个组件
<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 选择的每一项。
当我测试点击的时候 发现active类没有发生绑定。
开始找原因
- f12看页面发现dom也没有挂载这个类名。
active类是公共样式里的类名，会不会不能在我这个组件引用。
于是我改成
v-bind:class="active"
这下绑定了，说明我的类名没问题
- 这里出了问题 点击事件引起
this.optionValue = item.value;
duggber后发现数据改变了，数据是没问题的，但是页面没更新。 - 直到看到控制台的警告
hhh.png
-------天哪这里的optionValue不是响应式绑定的，没有添加进data里，数据是改变了，但Vue根本不会理你。
看这张图
68747470733a2f2f636e2e7675656a732e6f72672f696d616765732f646174612e706e67.png
看了染陌大神的learnVue
我的理解就是
1.因为vue没有把数据optionValue添加进一开始响应式绑定里，没有对getter，setter重写
2.更不会在渲染的时候收集render里的数据添加进deps依赖收集容器里。
3.数据改变不会触发setter，数据option Value自己watch不到自己的改变，不会notify到，不会触发自己的updata，没有相应的回调通知组件重新渲染的函数。
关于vue的wanning
1.在vue的生命周期created的时候会完成数据的装载。vue实例的数据对象data有了，$el还没有。
2.在beforemounted会首次调用render方法，解析template模板。渲染的时候发现没有optionValue发出警告。
3.数据视图都准备好组件开始挂载，mounted挂载好在vue data之外的数据不会添加进响应式绑定中，所以视图不会改变。
- 这时应该这样修改
data() {
return {
optionValue:this.selectTypes[0].value
};
},
附上vue生命周期图
lifecycle.png
