类似React提倡组件式的写法,Vue也为我们提供了丰富的组件编写,下面是自己常用的两种:
一.单文件组件(暴露props、method、event)
基于Vue的SFC(单文件组件)的拓展,最大目的就是要对外提供 配置项、事件操作回调、插槽扩展,下面写个简单的Vue组件:
<template>
<div>
<!--此处用于引入其他组件的 二次使用 常用v-bind v-on 进行穿透-->
<van-rate v-model="value" v-bind="$attrs" v-on="$listeners" />
<!--插槽扩展,定制你自己要展示的视图-->
<slot name="a"></slot>
<slot name="b"></slot>
</div>
</template>
<script>
export default {
name: "index",
props: {
rate: {
type: Number,
default: 3,
},
},
data() {
return {
value: 0,
};
},
watch: {
rate: {
handler(newVal, oldVal) {
this.value = newVal;
},
deep: true,
},
},
};
</script>
上述代码想必大家都很熟悉了,有注解的那部分代码在日常开发中可以为我们提供很大的帮助,然后就是扯下几个老生常谈的问题,关于props里面的声明还是提倡规则化些,尽可能使用
props: {
rate: {
type: Number,
default: 3,
},
},
这种写法,以及组件间的数据流为单向,通常不可直接修改父组件赋给子组件的数据,那我们可以使用watch监听,
再赋值给子组件里data定义的变量,类似:
data() {
return {
value: 0,
};
},
watch: {
rate: {
handler(newVal, oldVal) {
this.value = newVal;
},
deep: true,
},
},
还有就是我们最常用的event操作,也作为子传父的标准方式,子组件通过$emit("事件名自己定义",{obj参数}) ,父组件通过在子组件使用 @[事件名]="fnc(res)" 去得到参数