web面試vue自定義組件及調用方式

// 將要顯示的組件導入
import mymodel from '../components/mymodel.vue'
export default {
  install: function (Vue) {
    // 1.0 根據 mymodel 組件對象得到它的構造函數
    const Mymodel = Vue.extend(mymodel)
    // 給所有的 vue 實例添加一個方法 $model
    Vue.prototype.$model = function () {
      // 為瞭顯示一個組件： mymodel
      // 2.0 創建一個組件對象
      const obj = new Mymodel()
      // 3.0 將組件顯示出來
      obj.show = true
      // 4.0 得到組件對象的 html 結構
      const html = obj.$mount().$el
      // 5.0 將 html 結構渲染到頁面上
      document.body.append(html)
    }
  }
}

<template>
  <div>
    <h3>以普通組件的方法來調用</h3>
    <button @click="fn1">show Model</button>
    <!-- <mymodel :value="show" @input="val => (show = val)"></mymodel> -->
    <mymodel v-model="show"></mymodel>
    <!-- sync：向組件內傳入瞭參數： xxx 從組件中接收瞭事件：update:xxx 事件會自動修改 xxx -->
    <!-- v-model：向組件內傳入瞭參數： value 從組件中接收瞭事件：input 事件會自動修改 value -->
    <h3>以 js 方式來調用</h3>
    <button @click="fn2">show Model</button>
  </div>
</template>
<script>
import mymodel from '../../components/mymodel.vue'
export default {
  data () {
    return {
      show: false
    }
  },
  methods: {
    fn1 () {
      this.show = true
    },
    fn2 () {
      // 通過 js 的方法直接將組件顯示出來
      this.$model()
    }
  },
  components: {
    mymodel: mymodel
  }
}
</script>

<style></style>