vue中对extend的理解

在使用element-ui的过程中,我相信你在使用到类似this.$message功能的时候,会觉得这个功能真的非常方便,不用import入组件,全局都可以调用。它就是通过Vue.extend + $mount实现。

扩展实例构造器

Vue.extend返回的是一个“扩展实例构造器”,也就是一个预设了部分选项的 Vue 实例构造器。刚学的时候对“扩展实例构造器”这一名词感觉很疑惑,其实它就像构造函数,构造函数中会事先定义好一些属性,new出来的对象也就默认有构造函数中的属性,同理Vue.extend也是如此,看下例:

 1 //DOM
 2 <div id="point"></div>
 3 
 4 // 构建一个扩展实例构造器
 5 var todoItem = Vue.extend({
 6     template: ` <p v-on:click="wordClick"> {{ text }} </p> `,
 7     data() {
 8         return {
 9             text: 'default word'
10         }
11     },
12     methods:{
13         wordClick(){
14             console.log('click me')
15         }
16     }
17 })
18 //实例化一个新的对象并绑定到对应的DOM元素上
19 new todoItem({
20     data() {
21         return {
22             text: 'hello world'
23         }
24     }
25 }).$mount('#point');

todoItem是一个“扩展实例构造器”,预设了templatedatamethods,当new出一个新的对象的时候,新对象也默认拥有这些模块,同时也可以替换新的属性,非常灵活。

 

封装toast插件

一般在项目开发过程中,会新建一个plugins文件夹放编写的插件,一个插件对应一个文件夹,文件夹里包含两个文件,一个js文件和vue文件。

 

toast.vue

 1 <template>
 2     <transition name="message">
 3         <div class="toastWrap" v-if="toastShow" v-html="toastVal"></div>
 4     </transition>
 5 </template>
 6 
 7 <script>
 8 export default {
 9     name: 'Toast'
10 }
11 </script>
12 
13 <style scoped lang="scss">
14     ...
15 </style>

在该文件中可以事先写好toast的DOM结构和对应的样式

toast.js

 1 import Vue from 'vue'
 2 import toastComponent from './toast.vue'
 3 
 4 const ToastConstructor = Vue.extend(toastComponent);
 5 
 6 function showToast(toastVal='default',time=1000){
 7     let ToastDOM = new ToastConstructor({
 8         el:document.createElement('div'),
 9         data(){
10             return {
11                 toastVal:toastVal,
12                 toastShow:false
13             }
14         }
15     });
16     document.body.appendChild(ToastDOM.$el);
17     ToastDOM.toastShow = true;
18     let timer = setTimeout(res=>{
19         clearTimeout(timer);
20         ToastDOM.toastShow = false;
21     },time);
22 }
23 
24 Vue.prototype.$toast = showToast;
在全局调用$toast方法就是触发了绑定在Vue原型上的showToast方法,可以将Toast动态插入到body中,而不用像Component组件一样,都要预先import引入,相比较起来会方便很多。
App.vue
...
mounted() {
    this.$toast('这是一个tast弹窗',2000)
},
...

 至此就是对vue中extend的理解

posted @ 2021-08-19 15:41  yuwenjing  阅读(527)  评论(0编辑  收藏  举报