Vue.extend 属于 Vue 的全局 API，在实际业务开发中我们很少使用，因为相比常用的 Vue.component 写法使用 extend 步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount 这对组合是我们需要去关注的。
用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
为什么使用 extend
在 vue 项目中，我们有了初始化的根实例后，所有页面基本上都是通过 router 来管理，组件也是通过 import 来进行局部注册，所以组件的创建我们不需要去关注，相比 extend 要更省心一点点。但是这样做会有几个缺点：
- 组件模板都是事先定义好的，如果我要从接口动态渲染组件怎么办？
- 所有内容都是在 #app 下渲染，注册组件都是在当前位置渲染。如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它，该怎么办？
这时候，Vue.extend + vm.$mount 组合就派上用场了。
一个简单示例-hello world
index.vue
<template>
<div>
<p>text:{{ text }}</p>
<p>content:{{ content }}</p>
<p>isShow:{{ isShow }}</p>
</div>
</template>
<script>
export default {
props: {
text: {
type: String,
default: "textDefault"
}
},
data() {
return {
isShow: false,
content: "contentDefault"
};
}
};
</script>
跟他同级目录的 index.js
import Vue from "vue";
import helloWorld from "./index.vue";
const HelloWorldConstructor = Vue.extend(helloWorld);
const Hello = option => {
const HelloWorldInstance = new HelloWorldConstructor({
data: {
content: option.content
},
// 传props 值必须用 propsData
propsData: {
text: option.text
}
}); // 实例化一个带有content内容的Notice
// 设置 data 中的值也可以这样直接写
HelloWorldInstance.isShow = option.isShow;
HelloWorldInstance.$mount(); // 挂载但是并未插入dom，是一个完整的Vue实例
let helloDom = HelloWorldInstance.$el;
document.body.appendChild(helloDom); // 将dom插入body
// 一
// return HelloWorldInstance;
// 二
return () => {
HelloWorldInstance.$el.parentNode.removeChild(HelloWorldInstance.$el);
};
};
export default {
install: Vue => {
Vue.prototype.$hello = Hello;
}
};
main.js中注入
import Hello from "@/components/global/Hello"; //这个是 index.js
Vue.use(Hello); // 使用全局组件 Hello
使用--在test.vue中
<template>
<div>
测试 hello 组件
</div>
</template>
<script>
export default {
name: "test",
created() {
let removeHello = this.$hello({
content: "hello--content",
text: "hello--text",
isShow: "isShow-true"
});
setTimeout(() => {
// 一
// removeHello.$el.parentNode.removeChild(removeHello.$el);
// 二
removeHello();
}, 3000);
}
};
</script>
Vue.extend 自定义插件形式全局弹窗提示组件
来个升级版，写个类似alert的组件
notice.vue
<template>
<transition name="message-fade">
<div :class="['message', 'notice-' + type]" v-show="visible">
<i :class="'el-icon-' + type + ' content-' + type"></i>
<div :class="['content', 'content-' + type]">{{ content }}</div>
</div>
</transition>
</template>
<script>
export default {
data() {
return {
content: "",
type: "info", //'success','warning','error'
duration: 2500, // 弹窗展示时长
visible: false,
hasClose: false,
noticeTimer: null
};
},
mounted() {
this.close();
if (window.noticeEl && window.noticeEl.length > 0) {
let top = parseFloat(window.noticeEl[window.noticeEl.length - 1].style.top);
this.$el.style.top = top + 80 + "px";
window.noticeEl.push(this.$el);
} else {
window.noticeElTop = this.$el.offsetTop || document.body.clientHeight * 0.04;
this.$el.style.top = window.noticeElTop + "px";
window.noticeEl = [this.$el];
}
},
methods: {
close() {
setTimeout(() => {
this.visible = false;
window.noticeEl = window.noticeEl.filter(val => val !== this.$el);
let top = window.noticeElTop;
window.noticeEl.map((val, index) => {
val.style.top = top + index * 80 + "px";
return val;
});
setTimeout(() => {
this.$destroy(true);
this.$el.parentNode.removeChild(this.$el);
}, 800); // 销毁自身组件，主要是要大于动画执行时间
}, this.duration);
}
}
};
</script>
<style scoped lang="scss">
.message {
position: absolute;
top: 8vh;
left: 50%;
padding: 15px 20px;
border-radius: 8px;
background-color: #fff;
transform: translateX(-50%);
transition: opacity 0.2s, transform 0.2s, top 0.4s;
font-size: 30px;
}
.content {
display: inline-block;
margin-left: 12px;
min-width: 380px;
}
/* .#2ed573 */
.notice-success {
background-color: #f0f9eb;
border-color: #e1f3d8;
}
.el-icon-success,
.content-success {
color: #67c23a;
}
.notice-warning {
background-color: #fdf6ec;
border-color: #faecd8;
}
.notice-warning .content-warning {
color: #e6a23c;
}
.notice-error {
background-color: #fef0f0;
border-color: #fde2e2;
}
.notice-error .content-error {
color: #f56c6c;
}
// donghua
.message-fade-enter,
.message-fade-leave-to {
opacity: 0;
transform: translateX(-50%) translateY(-8vh);
}
.message-fade-enter-to,
.message-fade-leave {
opacity: 1;
transform: translateX(-50%) translateY(0px);
}
.message-fade-enter-active {
transition: all 0.4s ease;
}
.message-fade-leave-active {
transition: all 0.4s cubic-bezier(1, 0.2, 0.8, 1);
}
</style>
跟notice.vue同级目录的 index.js
import Vue from "vue";
const NoticeConstructor = Vue.extend(require("./notice.vue").default);
let nId = 1;
// 为了同时兼容单独引入此组件的情况,加 export ，可以单独导出
export const Notice = (option = { message: "提交成功！", type: "success" }) => {
const NoticeInstance = new NoticeConstructor({
data: {
content: option.message,
type: option.type
}
}); // 实例化一个带有content内容的Notice
NoticeInstance.visible = true;
NoticeInstance.id = "notice-" + nId++;
NoticeInstance.$mount(); // 挂载但是并未插入dom，是一个完整的Vue实例
NoticeInstance.$el.style.zIndex = nId + 10000;
document.body.appendChild(NoticeInstance.$el); // 将dom插入body
return NoticeInstance;
};
// 全局组件挂载所用，对应 Vue.use()
export default {
install: Vue => {
Vue.prototype.$notice = Notice;
}
};
main.js中注入
import Notice from "@/components/global/Notice"; //这个是 index.js
Vue.use(Notice); // 使用全局组件 notice
使用--在test.vue中
<template>
<div>
<el-button type="danger" @click="testClick">
Notice全局组件使用
</el-button>
<el-button type="danger" @click="NoticeClick">
Notice单独引入使用
</el-button>
</div>
</template>
<script>
import { Notice } from "@/components/global/Notice"; //这个是 index.js
export default {
name: "test",
methods: {
NoticeClick() {
let num = Math.floor(Math.random() * (1 - 10) + 10);
let type = "";
if (num <= 3) {
type = "success";
} else if (num <= 6) {
type = "warning";
} else {
type = "error";
}
Notice({
message: "提交成功！",
type
});
},
testClick() {
let num = Math.floor(Math.random() * (1 - 10) + 10);
let type = "";
if (num <= 3) {
type = "success";
} else if (num <= 6) {
type = "warning";
} else {
type = "error";
}
this.$notice({
message: "提交成功！",
type
});
// this.$notify({
// title: "成功",
// message: "这是一条成功的提示消息",
// type
// });
}
}
};
</script>
上面引入定义的组件用了两种方式
import helloWorld from "./index.vue";
const HelloWorldConstructor = Vue.extend(helloWorld);
等同于
const NoticeConstructor = Vue.extend(require("./notice.vue").default);
