使用vue元件封裝共用的元件

2022-05-27 14:01:45

這裡提供兩種vue封裝共用元件的方法

方法一

main.js中

import ListItem from './components/list.vue'//封裝共用元件方法一
Vue.component('ListItem',ListItem)

方法二

新建vue檔案的時候再建個相應的js檔案。

component.js

import child from './component.vue'
 
export default child.install = function (Vue) {
  Vue.component(child.name,child)
}

main.js中

import child from './components/component/component.js'//封裝共用元件方法二
Vue.use(child)

通過上面的兩種方法定義公共元件後都可以直接<child>和<component>這樣呼叫元件了，無需在每個vue檔案中important元件了。

說說方法二吧根據官方檔案提供的api

vue使用install定義安裝全域性元件需要install和use這兩個api來配合才能完成。我更喜歡第一種但是今天看了公司的程式碼認識到了第二種方法，也發現了vue提供了不少提高生產效率的api往後會繼續深入去學習這些api。

同時也解決了一個困惑很長時間的問題，element ui中的message這個元件不需要vue.use安裝直接就能用，因為element原始碼中直接將這個元件賦值到vue的prototype上了，其他的元件都只export 暴露出install方法所以其他元件需要vue.use安裝

vue封裝公共元件呼叫方法

需求：專案中所有的提示資訊都是彈框樣式的，並且顯示兩秒後自動消失

vue頁面

<template>
  <!-- 公用提示資訊頁面 -->
  <el-dialog
    title="提示"
    :visible.sync="dialogVisible"
    :show-close="false"
    top="40vh"
    width="30%"
  >
    <div class="content">
      <span>{{ text }}</span>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: true,
      text: ""
    };
  }
};
</script>

<style lang="less" scoped>
.content {
  font-size: 16px;
  color: #333;
  text-align: center;
  span {
    margin-left: 10px;
  }
}
/deep/ .el-dialog__header {
  padding: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-weight: 600;
  background-color: #08519c;
}
/deep/ .el-dialog__title {
  color: #fff;
}
</style>

js頁面

// 公共提示資訊js
import Vue from "vue";
import Toast from "./dialogMessage.vue"; //引入元件
// 返回一個「擴充套件範例構造器」
let ToastConstructor = Vue.extend(Toast);
let myToast = (text, duration) => {
  let toastDom = new ToastConstructor({
    el: document.createElement("div") //將toast元件掛載到新建立的div上
  });
  document.body.appendChild(toastDom.$el); //把toast元件的dom新增到body裡
  toastDom.text = text;
  toastDom.duration = duration;
  // 在指定 duration 之後讓 toast消失
  setTimeout(() => {
    toastDom.dialogVisible = false;
  }, toastDom.duration);
  // 呼叫時  this.$toast("新內容", 1000);
};
export default myToast;

在main.js中全域性註冊

import toast from "./components/dialogMessage.js"; //引入toast函數
  //給Vue物件新增$toast方法
  Vue.prototype.$toast = toast;

頁面中使用，像使用message一樣

 this.$toast("新內容", 1000);

效果

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

使用vue元件封裝共用的元件

目錄

這裡提供兩種vue封裝共用元件的方法

方法一

方法二

vue封裝公共元件呼叫方法

熱門文章