欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中如何引用公共方法和公共組件

 更新時間：2023年05月24日 09:44:15   作者：奧特蛋_mm  
這篇文章主要介紹了Vue中如何引用公共方法和公共組件問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue引用公共方法和公共組件

vue中引用公共方法

1.在src新建commonFunction文件夾,再新建common.js

其中common.js中方法的聲明和導出如下

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">導入excel</el-button>
          <el-button type="danger">導出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中引入，如下代碼：

// 導入全局組件(公共組件)
import PageTool from '@/components/employes'
Vue.component(`PageTool`, PageTool)

總結(jié)

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論