继承在Vue3中的使用

4,725 阅读1分钟

继承在Vue3中的使用

Vue2 中使用 extends

// monthDetail.vue
// monthDetail 中定义的 data methods 会跟 dayDetail 合并 
// 可以在对应的文件中定义区分的属性 方法等
// 如果是完全继承 可以没有 data methods 等
import dayDetail from './dayDetail.vue';
export default {
  extends: dayDetail,
  data() {
    isMonth: false
  },
  methods: {

  }
}

Vue3 中使用 extends

// monthDetail.vue
import dayDetail from './dayDetail.vue';
import {
  defineComponent
} from 'vue';

export default defineComponent({
  extends: dayDetail,
  // setup 不能省
  setup(props, context) {
    return {
      // 如何自定义属性 区分 dayDetail monthDetail
      ...dayDetail.setup(props, context) // !!! 这里是关键
    }
  }
})
  • 如何自定义属性 区分 dayDetail monthDetail ?