进行对比的讲解。首先是一个基本的
Vue 组件，我们常称其为被包装组件(
WrappedComponent )，假设我们的组件叫做
BaseComponent ：base-component.vue
<template>
<div>
<span @click="handleClick">props: {{test}}</span>
</div>
</template><script>
export default {
name: 'BaseComponent',
props: {
test: Number
},
methods: {
handleClick () {
this.$emit('customize-click')
}
}
}
</script>
我们观察一个
Vue 组件主要观察三点：
props 、
event 以及
slots 。对于
BaseComponent 组件而言，它接收一个数字类型的
props 即
test ，并发射一个自定义事件，事件的名称是：
customize-click ，没有
slots 。我们会这样使用该组件：
<base-component @customize-click="handleCustClick" :test="100" />现在我们需要
base-component 组件每次挂载完成的时候都打印一句话：
I have already mounted ，同时这也许是很多组件的需求，所以按照
mixins 的方式，我们可以这样做，首先定义个
mixins ：
export default {
name: 'BaseComponent',
props: {
test: Number
},
mixins: [ consoleMixin ] methods: {
handleClick () {
this.$emit('customize-click')
}
}
}然后在
BaseComponent 组件中将
consoleMixin 混入：
export default {
name: 'BaseComponent',
props: {
test: Number
},
mixins: [ consoleMixin ] methods: {
handleClick () {
this.$emit('customize-click')
}
}
}这样使用
BaseComponent 组件的时候，每次挂载完成之后都会打印一句
I have already mounted ，不过现在我们要使用高阶组件的方式实现同样的功能，回忆高阶组件的定义：
