Vue中如何引用公共方法和公共組件
vue引用公共方法和公共組件
vue中引用公共方法
1.在src新建commonFunction文件夾,再新建common.js
其中common.js中方法的聲明和導(dǎo)出如下
2.在main.js中引用common.js，再使用Vue.prototype添加實(shí)例屬性
3.應(yīng)用
@click=“common.方法名”
vue中引用公共組件
1.在src目錄下的components文件夾下新建公共組件
2.在main.js中引用，這里需要引用并初始化組件三個(gè)步驟
import AreaSelect from '@/components/AreaSelect'
Vue.use(AreaSelect) // 引用自定義組件
Vue.component('area-select', AreaSelect) // 初始化組件
new Vue({
el: '#app',
components: {
AreaSelect
},
})
3.直接用 area-select 即可使用
你不知道的Vue的公共組件？
1、組件是什么？
答：組件是包含數(shù)據(jù)、邏輯功能、展現(xiàn)樣式的代碼片段。
2、封裝公共組件要注意哪些事項(xiàng)？
答：1）可讀性。公共組件是團(tuán)隊(duì)協(xié)作的基礎(chǔ)，可讀性就顯得尤為總要，怎么增加組件的可讀性呢？首先組件命名要語(yǔ)義化，大家看到組件就一目了然，知道該組件的功能是啥；其次我們組件要有一個(gè)清晰明了的注釋，演示組件用例，屬性、參數(shù)、方法說(shuō)明，讓大家?guī)缀醪挥脛?dòng)腦就可以完美使用。
1.什么是公共組件？
本質(zhì)上是，多次使用一個(gè)組件
2.定義公共組件的·格式是什么？
Vue.component(‘組件名’)
3.組件對(duì)應(yīng)的vue文件放在哪里？
放在components文件夾中
4.使用vue公共的組件
在components文件夾中創(chuàng)建1個(gè)vue文件
<template>
<el-card>
<div class="page-tools">
<div class="left">
<div class="tips">
<i class="el-icon-info" />
<span>
<!-- 具名插槽 -->
<slot name="left">文字區(qū)域</slot>
</span>
</div>
</div>
<!-- 右側(cè) -->
<div class="right">
<!-- 具名插槽 -->
<slot name="right" />
</div>
</div>
</el-card>
</template>
<script>
export default {}
</script>
<style lang="scss" scoped>
.page-tools {
display: flex;
justify-content: space-between;
align-items: center;
.tips {
line-height: 34px;
padding: 0px 15px;
border-radius: 5px;
border: 1px solid rgba(145, 213, 255, 1);
background: rgba(230, 247, 255, 1);
i {
margin-right: 10px;
color: #409eff;
}
}
}
</style>在使用的地方引入component創(chuàng)建的文件，在component里面定義
代碼如下：
<template>
<div class="department-container">
<div class="app-container">
<page-tool>
<template #left>
總記錄數(shù)：20條
</template>
<template #right>
<el-button type="warning">導(dǎo)入excel</el-button>
<el-button type="danger">導(dǎo)出excel</el-button>
<el-button type="primary">新增員工</el-button>
</template>
</page-tool>
<el-card>
<!-- 具體頁(yè)面結(jié)構(gòu) -->
員工管理
</el-card>
</div>
</div>
</template>
<script>
import PageTool from '@/components/employes'
export default {
components: {
PageTool
}
}
</script>如果是全局組件的話是以下的方式 在main.js中引入，如下代碼：
// 導(dǎo)入全局組件(公共組件) import PageTool from '@/components/employes' Vue.component(`PageTool`, PageTool)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了如何使用Vue封裝一個(gè)前端通用右鍵菜單組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
這篇文章主要為大家介紹了Iframe在Vue中的狀態(tài)保持技術(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Vue.js移動(dòng)端左滑刪除組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue.js移動(dòng)端左滑刪除組件的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
python虛擬環(huán)境 virtualenv的簡(jiǎn)單使用
virtualenv是一個(gè)創(chuàng)建隔絕的Python環(huán)境的工具。這篇文章主要介紹了python虛擬環(huán)境 virtualenv的簡(jiǎn)單使用，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue-Router進(jìn)階之滾動(dòng)行為詳解
本篇文章主要介紹了Vue-Router進(jìn)階之滾動(dòng)行為詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
利用SpringMVC過(guò)濾器解決vue跨域請(qǐng)求的問(wèn)題
下面小編就為大家分享一篇利用SpringMVC過(guò)濾器解決vue跨域請(qǐng)求的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
VUE中this.$router.push點(diǎn)了后hash地址改變了頁(yè)面不跳轉(zhuǎn)
本文主要介紹了VUE中this.$router.push點(diǎn)了后hash地址改變了頁(yè)面不跳轉(zhuǎn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-11-11
vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)
本文主要介紹了vue 輸入框輸入任意內(nèi)容返回?cái)?shù)字的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-03-03
vue自定義table表如何實(shí)現(xiàn)內(nèi)容上下循環(huán)滾動(dòng)
這篇文章主要介紹了vue自定義table表如何實(shí)現(xiàn)內(nèi)容上下循環(huán)滾動(dòng)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)
這篇文章主要介紹了Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04