Vue中扩展新组件

165 阅读2分钟

实现方式有:

  • 逻辑扩展有:mixins、extends、composition api;
  • 内容扩展有slots;
  1. 常⻅的组件扩展⽅法有:mixins,slots,extends等

  2. 混⼊mixins是分发 Vue 组件中可复⽤功能的⾮常灵活的⽅式。混⼊对象可以包含任意组件选项。当组件使⽤混⼊对象时,所有混⼊对象的选项将被混⼊该组件本身的选项。

// 复⽤代码:它是⼀个配置对象,选项和组件⾥⾯⼀样
constmymixin= {
    methods: {
        dosomething(){}
    }
}
// 全局混⼊:将混⼊对象传⼊
Vue.mixin(mymixin)

// 局部混⼊:做数组项设置到mixins选项,仅作⽤于当前组件
constComp= {
    mixins: [mymixin]
}

  1. 插槽主要⽤于vue组件中的内容分发,也可以⽤于组件扩展。

⼦组件Child

<div>
<slot>这个内容会被⽗组件传递的内容替换</slot>
</div>

⽗组件Parent

<div>
    <Child>来⾃⽼爹的内容
</div>

如果要精确分发到不同位置可以使⽤具名插槽,如果要使⽤⼦组件中的数据可以使⽤作⽤域插槽。

  1. 组件选项中还有⼀个不太常⽤的选项extends,也可以起到扩展组件的⽬的
// 扩展对象
constmyextends= {
    methods: {
        dosomething(){}
    }
}
// 组件扩展:做数组项设置到extends选项,仅作⽤于当前组件
// 跟混⼊的不同是它只能扩展单个对象
// 另外如果和混⼊发⽣冲突,该选项优先级较⾼,优先起作⽤
constComp= {
    extends: myextends
}
  1. 混⼊的数据和⽅法不能明确判断来源且可能和当前组件内变量产⽣命名冲突,vue3中引⼊的composition api,可以很好解决这些问题,利⽤独⽴出来的响应式模块可以很⽅便的编写独⽴逻辑并提供响应式的数据,然后在setup选项中组合使⽤,增强代码的可读性和维护性。例如:
// 复⽤逻辑1
functionuseXX() {}
// 复⽤逻辑2
functionuseYY() {}
// 逻辑组合
constComp= {
    setup() {
        const {xx} =useXX()
        const {yy} =useYY()
        return {xx, yy}
    }
}   

mixins原理:

github1s.com/vuejs/core/…

github1s.com/vuejs/core/…

slots原理:

github1s.com/vuejs/core/…

github1s.com/vuejs/core/…

github1s.com/vuejs/core/…