vue-自定义组件之组件的继承

CV大法一时爽，业务变更火葬场。在业务开发过程中会遇到很多重复的场景，不能所有的东西都一直复制粘贴，作为一个后端开发，我们讲解面向对象开发，没有对象怎么办，先new一个呗。

首先创建一个基础的vue文件

BasicVue.vue 这个vue是以后开发所有公用组件的父组件

<template>

</template>

<script>
  export default {
    name: "BasicVue",
    data() {
      return {

      }
    },
    model: {
      prop: 'name',// 指定父组件中v-model绑定到子组件上的属性名
      event: 'update:name',// 指定子组件中属性发生改变的时候，触发父组件什么方法
    },
    computed: {
      // 通过计算属性达到访问父组件值和修改父组件值的目的
      _name: {
        get() {
          return this.name
        },
        set(newVal, oldVal) {
          // 通过发射修改父组件的值
          this.$emit('update:name', newVal)
        }
      }
    },
    props: {
      // 提供给父组件绑定的属性
      name: {
        type: String,
        default: function () {
          return ''
        }
      }
    },
    methods:{

    }
  }
</script>

<style scoped>

</style>

再创建一个Child.vue组件

<template>
  <div>
    下面是子组件中的按钮
    <button @click="changeName">{{_name}}</button>
  </div>
</template>

<script>
  import BasicVue from './BasicVue'
  export default {
    name: "Child",
    extends: BasicVue,// 继承基础组件的时候会继承基础组件中定义的计算属性、方法、属性等等、、、
    methods: {
      changeName() {
        // 注意此处不能直接设置this.name 而应该通过计算属性中的_name去修改父组件的值
        this._name = '子组件'
      }
    }
  }
</script>

<style scoped>

</style>

看过上一篇博文的应该知道将上面的BasicVue和Child放到一起才是我们的Child.vue，但是本篇通过extends将双向绑定的代码剥离到BasicVo中，以后开发子组件的时候就不用关心数据双向绑定的问题了。