原理
- v-bind="$attrs"继承所有属性和props。
- v-on="$listeners"继承所有的方法。
<template>
<div style="display: contents;">
<第三方组件名称 v-bind="$attrs" v-on="$listeners" @click="handleClick()">
<slot name="default"> 默认slot的默认值</slot>
</第三方组件名称>
</div>
</template>
<script>
import 第三方组件名称 from './第三方组件文件所在目录/第三方组件名称.vue'
export default {
name: '当前二次封装组件名称',
components: {
第三方组件名称,
},
model: {
prop: 'value',
event: ['用于更新父组件绑定model的子组件emit值'],
},
props: {
value: {
type: [String, Number,],
default: () => {
const theDate = '由父组件v-model绑定后传入的名为value的props默认值'
return theDate
},
},
},
data() {
return {
stateControl: {
theValue: '当前组件内部value的默认值',
},
}
},
watch: {
async value() {
if (this.stateControl.theValue !== this.value) {
this.stateControl.theValue = this.value
}
},
'stateControl.theValue'() {
if (this.stateControl.theValue !== this.value) {
const params = this.stateControl.theValue
this.$emit('用于更新父组件绑定model的子组件emit值', params)
}
},
},
mounted() {
this.handleClick()
},
methods: {
handleClick() {
console.log('当前二次封装组件内部点击事件;')
},
},
}
</script>
说明
- 这种方式没有让第三方组件直接继承父组件的slot,即第三方组件的slot需要自己补充实现。
来源
- vue继承一个组件,对element-ui二次开发;