Vue动态创建实例

在做UI项目的需要用js在页面中插入一个Vue组件,需要用到Vue的手动挂载$mount,做此次简单的记录只为以后回顾。

我们如果想要在页面弹出一个东西，通常我们都是提前在页面写好内容，可以用v-if='visible',控制visible的boolean值来实现效果。

但是现在介绍的是让用户手动点击来创建一个实例：

//HTML                                                                                     
<div id="app">
<button @click="showToast">点我</button>
</div>
<script src="./src/app.js/"></script>

//app.js                                                                                  
import plugin from './plugin'
Vue.use(plugin)

new Vue({
    el: '#app',
    methods: {
        showToast() {
            this.$toast('我是toast')//$toast是一个plugin
        }
    }

})                                                                      

注册/$toast

//plugin.js
export default {
    install(Vue, options) {
        Vue.prototype.$toast = function (message) {
          //  Vue.extend() 来生成一个 Vue 的子类构造函数
            let Constructor = Vue.extend({ 
            <template>
               <div class="toast">
                      <slot></slot>
               </div>
           </template>})

             //toast是构造出来的实例
            let toast = new Constructor()
            toast.$slots.default = [message]
            toast.$mount()
            document.body.appendChild(toast.$el)
        }
    }
}

又上面代码可以知道，当我们点击button时，执行showToast函数，该函数里面又有一个回调，在这个回调里面会创建一个实例，然后挂载。

看懂上面代码需要了解：

Vue插件

Vue插槽

Vue.extend