回顾Vue组件常见写法(一)

类似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)" 去得到参数