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）可讀性。公共組件是團(tuán)隊協(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項目中使用tinymce編輯器的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
為了讓一些不太清楚搭建前端項目的小白,更快上手,下面這篇文章主要給大家介紹了關(guān)于安裝node.js以及搭建vue項目過程中遇到問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
Vue利用History記錄上一頁面的數(shù)據(jù)方法實例
這篇文章主要給大家介紹了關(guān)于Vue利用History記錄上一頁面的數(shù)據(jù)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
這篇文章主要介紹了Vue使用vux-ui自定義表單驗證遇到的問題及解決方法,需要的朋友可以參考下2018-05-05
這篇文章主要介紹了Vue中的同步調(diào)用和異步調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue3中內(nèi)置組件Teleport的基本使用與典型案例
Teleport是一種能夠?qū)⑽覀兊哪０逡苿拥紻OM中Vue app之外的其他位置的技術(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3中內(nèi)置組件Teleport的基本使用與典型案例的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章給大家分享了vue檢測對象和數(shù)組的變化的相關(guān)知識點與實例代碼，有興趣的朋友參考下。2018-06-06
ant-design-vue中的table自定義格式渲染解析
這篇文章主要介紹了ant-design-vue中的table自定義格式渲染，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Cookbook組件形式：優(yōu)化 Vue 組件的運(yùn)行時性能
本文仿照Vue Cookbook 組織形式，對優(yōu)化 Vue 組件的運(yùn)行時性能進(jìn)行闡述。通過基本的示例代碼給大家講解，需要的朋友參考下2018-11-11
在前端vue的開發(fā)中,有一點是必須要做的,那就是將所有的API接口封裝起來,因為從開發(fā)到最終上線的過程中,API是需要經(jīng)常更換的,下面這篇文章主要給大家介紹了關(guān)于Vue項目API接口封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09