Vue extend學習示例講解

更新時間：2022年09月20日 14:27:38 作者：正在學習前端的渣渣-小方同學

這篇文章主要介紹了Vue.extend使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

1、什么是動態(tài)創(chuàng)建組件

只有在觸發(fā)事件的時候，才產(chǎn)生某組件，平時它并不存在；

2、Vue.extend()

使用基礎 Vue 構造器，創(chuàng)建一個“子類”。參數(shù)是一個包含組件選項的對象；其實就是一個子類構造器是Vue組件的核心api，實現(xiàn)思路就是使用原型繼承的方法返回了Vue的子類，并且利用mergeOptions把傳入組件的options和父類的options進行了合并。

extend創(chuàng)建的是一個組件構造器，而不是一個具體的實例；

接收一個對象（包含組件選項的對象）作為參數(shù)，需要使用new來創(chuàng)建實例，并且需要$mount手動掛載到一個元素上，才可以獲取到這個元素的相應的信息。

脫離填鴨式的寫法；代碼自由
代碼復用，解耦
原生JS語法結合vue(jsx)
通過傳入?yún)?shù)，可以顯示不同狀態(tài)的模板

基礎用法：

<div id="mount-point"></div>
// 創(chuàng)建構造器
/* Vue.extend( options )
  參數(shù)：{Object} options
  用法：使用基礎 Vue 構造器，創(chuàng)建一個“子類”。參數(shù)是一個包含組件選項的對象；
       data 選項是特例，需要注意： 在 Vue.extend() 中它必須是函數(shù)；*/
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 創(chuàng)建 Profile 實例，并掛載到一個元素上。
new Profile().$mount('#mount-point')
// 結果如下：
<p>Walter White aka Heisenberg</p>
/*
可以看到，extend 創(chuàng)建的是 Vue 構造器，而不是我們平時常寫的組件實例，所以不可以通過 new Vue({ components: testExtend }) 來直接使用，需要通過 new Profile().$mount('#mount-point') 來掛載到指定的元素上。
*/

3、通過extend實現(xiàn)彈窗的動態(tài)創(chuàng)建

3.1、創(chuàng)建動態(tài)組件

<!--動態(tài)組件的模板-->
<template>
  <!--  可以用MessageBox做蒙塵-->
  <div :class="['MessageBox',type]">
    <div class="inner">
      <header class="header">
        <h1 class="title">{{ title }}</h1>
        <span @click="$messageBox.hide()">x</span>
      </header>
      <div class="content">{{ content }}</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "MessageBox",
  props: {
    title: {
      type: String,
      default: "this is title",
    },
    content: {
      type: String,
      default: "this is content",
    },
    type: {
      type: String,
      default: "primary",
      //檢測傳進來的類型是否是這四種，通過ES6提供的includes方法模糊查詢
      validator(value) {
        return [
          "primary",
          "success",
          "warn",
          "danger"
        ].includes(value);
      }
    }
  }
}
</script>
<style scoped lang="less">
.MessageBox {
  position: fixed;
  left: 50%;
  top: 0;
  //蒙塵的大小設置
  width: 50%;
  height: 400px;
  background-color: rgba(0, 0, 0, .5);
  //不同彈窗的樣式
  &.primary {
    .header {
      background-color: blue;
      color: #fff;
    }
  }
  &.success {
    .header {
      background-color: green;
      color: #fff;
    }
  }
  &.warn {
    .header {
      background-color: rgba(255, 138, 71, 0.96);
      color: #fff;
    }
  }
  &.danger {
    .header {
      background-color: red;
      color: #fff;
    }
  }
  .inner {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 500px;
    margin-left: -250px;
    background-color: #fff;
    box-shadow: 1px 3px 5px #ddd;
    border-radius: 5px;
    overflow: hidden;
    .header {
      height: 44px;
      padding: 0 10px;
      line-height: 44px;
      box-sizing: border-box;
      h1 {
        margin: 0;
        font-weight: normal;
      }
      .title {
        font-size: 16px;
        float: left;
      }
      span {
        //將鼠標改為小手樣式
        cursor: pointer;
        float: right;
      }
    }
    .content {
      padding: 20px;
      box-sizing: border-box;
    }
  }
}
</style>

3.2、編輯動態(tài)組件的邏輯

//引入需要動態(tài)創(chuàng)建的模板
import _MessageBox from "@/components/messageBox/MessageBox";
export default {
    //install開發(fā)插件的方法，install帶有Vue的構造器，可以使用Vue.extend，和Vue.component(注冊組件)
    //在Vue.use的時候就會調(diào)用這個install
    install(Vue) {
        let messageBox = null;
        //使用Vue.component全局注冊組件
        Vue.component(_MessageBox.name, _MessageBox);
        //將方法添加到Vue的prototype屬性中，這樣實例就可以繼承里面的方法
        Vue.prototype.$messageBox = {
            show, hide,
            info({title, content, type}, callback) {
                this.show({title, content, type: "primary"}, callback)
            },
            success({title, content, type}, callback) {
                this.show({title, content, type: "success"}, callback)
            },
            warn({title, content, type}, callback) {
                this.show({title, content, type: "warn"}, callback)
            },
            danger({title, content, type}, callback) {
                this.show({title, content, type: "danger"}, callback)
            }
        }
        //顯示彈窗
        function show(props, callback) {
            //判斷這個組件是否存在，如果不存在
            if (!messageBox) {
                //生成構造函數(shù)、構造器
                const MessageBox = Vue.extend({
                    /*
                    render該渲染函數(shù)接收一個 createElement 方法作為第一個參數(shù)用來創(chuàng)建 VNode（節(jié)點）。
                   如果組件是一個函數(shù)組件，渲染函數(shù)還會接收一個額外的 context 參數(shù)，為沒有實例的函數(shù)組件提供上下文信息。
                  */
                    //此處傳入的是一個函數(shù)組件，所以渲染的函數(shù)還可以額外接收一個參數(shù)
                    render(h) {
                        //h函數(shù)就是vue中的createElement函數(shù)，這個函數(shù)作用就是創(chuàng)建虛擬dom，追蹤dom變化的
                        return h("MessageBox", {
                            //用于接收傳遞的參數(shù)
                            props: {...props}
                        })
                    }
                });
                //將動態(tài)模板組件實例化
                messageBox = new MessageBox();
                //將這個實例手動掛載，掛載后可以通過$el獲取這個元素
                this.vm = messageBox.$mount();
                //將組件添加到body上，脫離了根節(jié)點，不在"id=app中"
                document.body.appendChild(this.vm.$el)
                callback && callback();
            }
        }
        //關閉彈窗
        function hide(callback) {
            //移出這個組件
            document.body.removeChild(this.vm.$el);
            //將這個實例銷毀
            messageBox.$destroy();
            messageBox = null;
            this.vm = null;
            //如果存在才會執(zhí)行
            callback && callback();
        }
    }
}

3.3、在main.js中引入使用

import Vue from 'vue'
import App from './App.vue'
//1、引入
import MessageBox from "@/components/messageBox";
//2、全局注冊使用
Vue.use(MessageBox);
new Vue({
    render: h => h(App)
}).$mount('#app')

3.4、在需要的地方通過觸發(fā)事件顯示彈窗

<template>
  <div>
    <button @click="showMessageBox">show</button>
    <button @click="showInfoMessageBox">info</button>
    <button @click="showSuccessMessageBox">success</button>
    <button @click="showWarnMessageBox">warn</button>
    <button @click="showDangerMessageBox">danger</button>
  </div>
</template>
<script>
export default {
  name: "Extend",
  methods: {
    //通過this.$messageBox可以訪問到Vue實例的屬性和方法
    showMessageBox() {
      this.$messageBox.success({
        title: 'App',
        content: 'this is content of extend study',
        type: 'success'
      }, () => {
        console.log('show over')
      })
    },
    showInfoMessageBox() {
      this.$messageBox.info({
        title: 'App',
        content: 'this is content of extend study',
      }, () => {
        console.log('info over')
      })
    },
    showSuccessMessageBox() {
      this.$messageBox.success({
        title: 'App',
        content: 'this is content of extend study',
        type: 'success'
      }, () => {
        console.log('success over')
      })
    },
    showWarnMessageBox() {
      this.$messageBox.warn({
        title: 'App',
        content: 'this is content of extend study',
        type: 'warn'
      }, () => {
        console.log('warn over')
      })
    },
    showDangerMessageBox() {
      this.$messageBox.danger({
        title: 'App',
        content: 'this is content of extend study',
        type: 'danger'
      })
    }
  }
}
</script>