Vue中如何引用公共方法和公共組件
vue引用公共方法和公共組件
vue中引用公共方法
1.在src新建commonFunction文件夾,再新建common.js
其中common.js中方法的聲明和導(dǎo)出如下
2.在main.js中引用common.js，再使用Vue.prototype添加實例屬性
3.應(yīng)用
@click=“common.方法名”
vue中引用公共組件
1.在src目錄下的components文件夾下新建公共組件
2.在main.js中引用，這里需要引用并初始化組件三個步驟
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、封裝公共組件要注意哪些事項？
答：1）可讀性。公共組件是團隊協(xié)作的基礎(chǔ)，可讀性就顯得尤為總要，怎么增加組件的可讀性呢？首先組件命名要語義化，大家看到組件就一目了然，知道該組件的功能是啥；其次我們組件要有一個清晰明了的注釋，演示組件用例，屬性、參數(shù)、方法說明，讓大家?guī)缀醪挥脛幽X就可以完美使用。
1.什么是公共組件？
本質(zhì)上是，多次使用一個組件
2.定義公共組件的·格式是什么？
Vue.component(‘組件名’)
3.組件對應(yīng)的vue文件放在哪里？
放在components文件夾中
4.使用vue公共的組件
在components文件夾中創(chuàng)建1個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>
<!-- 具體頁面結(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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了如何使用Vue封裝一個前端通用右鍵菜單組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
這篇文章主要為大家介紹了Iframe在Vue中的狀態(tài)保持技術(shù)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
本篇文章主要介紹了Vue.js移動端左滑刪除組件的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
python虛擬環(huán)境 virtualenv的簡單使用
virtualenv是一個創(chuàng)建隔絕的Python環(huán)境的工具。這篇文章主要介紹了python虛擬環(huán)境 virtualenv的簡單使用，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-01-01
本篇文章主要介紹了Vue-Router進階之滾動行為詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
下面小編就為大家分享一篇利用SpringMVC過濾器解決vue跨域請求的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
VUE中this.$router.push點了后hash地址改變了頁面不跳轉(zhuǎn)
本文主要介紹了VUE中this.$router.push點了后hash地址改變了頁面不跳轉(zhuǎn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-11-11
vue 輸入框輸入任意內(nèi)容返回數(shù)字的實現(xiàn)
本文主要介紹了vue 輸入框輸入任意內(nèi)容返回數(shù)字的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
vue自定義table表如何實現(xiàn)內(nèi)容上下循環(huán)滾動
這篇文章主要介紹了vue自定義table表如何實現(xiàn)內(nèi)容上下循環(huán)滾動問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)
這篇文章主要介紹了Vue封裝一個TodoList的案例與瀏覽器本地緩存的應(yīng)用實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04