极简属性:data
(仅提供方法和极简示例,实践党可自行扩展,伸手党请绕行)
表单组件通用
注:此data是组件的一个隐藏属性
示例:
template:
{{sexs[grouplist.sexIndex].name}}
data:
sexs: [{name: "男"},{name: "女"}],
grouplist: {
name:'',
sexIndex:0
}
method:
inputInfo(e) {
let type = e.target.dataset.type // e.target.dataset.type中的type就是data-type中的参数
this.grouplist[type] = e.target.value // 给对象参数动态赋值
}
只需要这一个方法即可取代之前很多重复性的赋值工作,复用性极高
你可以叫 data-type 也可以起一个自己喜欢的 data-man 等等
缺点:这种template写法需要预置很多重复性的模板组件
解决思路:用 v-for 对 data-type 进行动态赋值,每个组件预置一次动态取用即可,但内部模板组件取用条件需自行书写判断逻辑。
有兴趣的道友还可以自行扩展。