web面試vue自定義組件及調(diào)用方式是怎樣的

本篇文章為大家展示了web面試vue自定義組件及調(diào)用方式是怎樣的，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

引入:

由于項(xiàng)目需求, 部分相同的代碼我們會(huì)封裝成組件, 在需要使用的地方導(dǎo)入,
并以標(biāo)簽的形式書寫在中,
但是在"vant"組件庫(kù)中, "Dialog 彈出框"組件有2中使用方式

通常我們自定義組件, 一般也是通過(guò)方式二的形式使用, 今天介紹方式一如何使用

編碼實(shí)現(xiàn)

以插件的形式使用組件

// 將要顯示的組件導(dǎo)入
import mymodel from '../components/mymodel.vue'
export default {
  install: function (Vue) {
    // 1.0 根據(jù) mymodel 組件對(duì)象得到它的構(gòu)造函數(shù)
    const Mymodel = Vue.extend(mymodel)
    // 給所有的 vue 實(shí)例添加一個(gè)方法 $model
    Vue.prototype.$model = function () {
      // 為了顯示一個(gè)組件： mymodel
      // 2.0 創(chuàng)建一個(gè)組件對(duì)象
      const obj = new Mymodel()
      // 3.0 將組件顯示出來(lái)
      obj.show = true
      // 4.0 得到組件對(duì)象的 html 結(jié)構(gòu)
      const html = obj.$mount().$el
      // 5.0 將 html 結(jié)構(gòu)渲染到頁(yè)面上
      document.body.append(html)
    }
  }
}

使用

<template>
  <div>
    <h4>以普通組件的方法來(lái)調(diào)用</h4>
    <button @click="fn1">show Model</button>
    <!-- <mymodel :value="show" @input="val => (show = val)"></mymodel> -->
    <mymodel v-model="show"></mymodel>
    <!-- sync：向組件內(nèi)傳入了參數(shù)： xxx 從組件中接收了事件：update:xxx 事件會(huì)自動(dòng)修改 xxx -->
    <!-- v-model：向組件內(nèi)傳入了參數(shù)： value 從組件中接收了事件：input 事件會(huì)自動(dòng)修改 value -->
    <h4>以 js 方式來(lái)調(diào)用</h4>
    <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 () {
      // 通過(guò) js 的方法直接將組件顯示出來(lái)
      this.$model()
    }
  },
  components: {
    mymodel: mymodel
  }
}
</script>

<style></style>

上述內(nèi)容就是web面試vue自定義組件及調(diào)用方式是怎樣的，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。