傑森前端

知識點

1. install ( 使用Vue.use會自動調用物件裡面的這個屬性名稱的function)。
2. Vue.extend ( 創建Vue組件構造函式並且可以new出實例，傳遞propsData當作組件接收的props )。
3. Vue.prototype ( 在原形上面加上方法 )。
4. vm.$el ( 組件實例的真實DOM存檔的地方 )。

組件

1. 與普通的組件一樣

# MyAlert.vue
<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
    props:{
        message:{
            type:String,
            default:'message'
        }
    }
}
</script>

插件

1. 這個部分主要是要製作動態引入與動態移除組件

# # MyAlert/index.js
// 組件引入
import MyAlert from './MyAlert.vue'
// 定義引入
const alertPlugin = {}
// Vue.use會自動調用插件的install方法
alertPlugin.install = function (Vue) {
    // 建構函式
    const instance = Vue.extend(MyAlert)
    // 原形賦予方法
    Vue.prototype.$show = function (message, time = 1000) {
        // 創建根元素
        let dom = document.createElement('div')
        // 掛載根元素
        document.querySelector('body').appendChild(dom)
        // 實例化組件並且掛載到剛剛創建的根元素上
        let vm = new instance({
            // 這個會變成組件的props傳進去
            propsData: {
                message: message
            }
        }).$mount(dom)
        // 因為是Alert讓他自動移除
        setTimeout(() => {
            // vm裡面的$el就是整個根元素可以用來移除
            vm.$el.parentNode.removeChild(vm.$el)
        }, time)

    }
}

export default alertPlugin

引入

1. 安裝外掛

# main.js
import Vue from 'vue'
import App from './App.vue'
import alertPlugin from '@/components/MyAlert/index.js'
// 使用插件
Vue.use(alertPlugin)
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

使用

<script>
  export default {
    mounted(){
      this.$show('dd',2000)
    }
  }

</script>