web面試vue自定義組件及調(diào)用方式
更新時(shí)間：2021年09月24日 11:31:38 作者：SpringSir
這篇文章主要介紹了web面試中常問(wèn)到的關(guān)于vue自定義組件及調(diào)用方式，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步
引入:
由于項(xiàng)目需求, 部分相同的代碼我們會(huì)封裝成組件, 在需要使用的地方導(dǎo)入,
并以標(biāo)簽的形式書(shū)寫(xiě)在中,
但是在"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>
<h3>以普通組件的方法來(lái)調(diào)用</h3>
<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 -->
<h3>以 js 方式來(lái)調(diào)用</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 () {
// 通過(guò) js 的方法直接將組件顯示出來(lái)
this.$model()
}
},
components: {
mymodel: mymodel
}
}
</script>
<style></style>
以上就是web面試vue自定義組件及調(diào)用方式的詳細(xì)內(nèi)容，更多關(guān)于web面試vue的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue3中ref和reactive的使用場(chǎng)景詳解
這篇文章主要介紹了Vue3中ref和reactive的使用場(chǎng)景,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了如何利用vite快速搭建vue3項(xiàng)目問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
使用Pinia Persistedstate插件實(shí)現(xiàn)狀態(tài)持久化的操作方法
Pinia 作為 Vue 的新一代狀態(tài)管理工具,以其輕量化和易用性受到開(kāi)發(fā)者的喜愛(ài),然而,Pinia 默認(rèn)使用內(nèi)存存儲(chǔ)狀態(tài),為了解決這個(gè)問(wèn)題,我們可以借助 Pinia Persistedstate 插件來(lái)實(shí)現(xiàn)狀態(tài)的持久化存儲(chǔ),本文將詳細(xì)介紹該插件的使用方法,需要的朋友可以參考下2024-11-11
vue中設(shè)置echarts寬度自適應(yīng)的代碼步驟
這篇文章主要介紹了vue中設(shè)置echarts寬度自適應(yīng)的問(wèn)題及解決方案,常常需要做到echarts圖表的自適應(yīng)，一般是根據(jù)頁(yè)面的寬度做對(duì)應(yīng)的適應(yīng)，本文記錄一下設(shè)置echarts圖表的自適應(yīng)的步驟，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue如何實(shí)現(xiàn)文件上傳及預(yù)覽問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue如何實(shí)現(xiàn)table表格置頂，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了Vue3組件間傳值避坑方法指南，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
MVVM 是Model-View-ViewModel 的縮寫(xiě)，它是一種基于前端開(kāi)發(fā)的架構(gòu)模式，Vue.js 是一個(gè)提供 MVVM 風(fēng)格的雙向數(shù)據(jù)綁定的 Javascript 庫(kù)，專(zhuān)注于View 層。這篇文章給大家介紹Vue.js 和 MVVM 的注意事項(xiàng)，感興趣的朋友一起看看吧2016-11-11
在我們?nèi)粘ｉ_(kāi)發(fā)中經(jīng)常因?yàn)樗季S定式，我們會(huì)犯一些奇怪的錯(cuò)誤，有時(shí)候看似簡(jiǎn)單的問(wèn)題卻給出了復(fù)雜的解決方案。下面這篇文章主要介紹了vue.js父組件使用外部對(duì)象的方法，這個(gè)看似簡(jiǎn)單卻繞了一些彎路的問(wèn)題，有必要和大家分享下，需要的朋友可以參考學(xué)習(xí)，下面來(lái)看看吧。2017-04-04
Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能
這篇文章主要介紹了Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格功能,演示如何在Vue中使用Element UI的Table組件實(shí)現(xiàn)嵌套表格,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01