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

vue 全局引用公共的組件以及公共的JS文件問題

 更新時(shí)間:2022年09月22日 08:48:36   作者:圓唉_  
這篇文章主要介紹了vue 全局引用公共的組件以及公共的JS文件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

全局引用公共的組件及公共的JS文件

1. 創(chuàng)建一個(gè)公共的目錄 timeline ,里面包含 timeline.js 和 timeline.vue 文件,timeline.vue 用來(lái)寫公共的頁(yè)面,timeline.js 用來(lái)導(dǎo)出這個(gè)組件。

在這里插入圖片描述

在這里插入圖片描述

timeline.vue 文件內(nèi)容如下

<template>
  <div>頁(yè)面展示內(nèi)容</div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>
<style lang="less" scoped>
</style>

timeline.js 文件內(nèi)容如下

import timelineData from './timeline.vue';
const timeline = {
  install: (Vue) => {
  	// 注冊(cè)并獲取組件,然后在 main.js 中引入,并 Vue.use()掛載
    Vue.component('timeline', timelineData)
  }
};
export default timeline;

2. 在 main.js 中引入公共的文件并掛載到Vue中

...
// 引入timeline
import timeline from './timeline/timeline.js';
Vue.use(timeline);
...

3. 在需要用到 timeline 的組件文件中直接使用即可

<template>
  <div>
  	// 頁(yè)面中直接使用即可
	<timeline></timeline>
  </div>
</template>

全局引入自定義組件問題

文件目錄

1. 書寫組件

<!-- index.vue -->
<template>
  <button class="h-button" :type="type">
    <slot></slot>
  </button>
</template>
<script>
export default {
  props:{
    type:{
      type:String,
      default:'button'
    }
  },
  data(){
    return{
    }
  }
}
</script>

2. 暴露install()方法

// index.js
import HButton from './index.vue';
HButton.install=function(Vue){
  Vue.component('HButton',HButton) // (組件名稱,對(duì)應(yīng)組件)
}
export default HButton;

3. 全局注冊(cè)

// main.js
// @ is an alias to /src
import HButton from '@/components/Btn/index'
Vue.use(HButton)

4. 使用

<!-- Home.vue 使用 -->
<template>
  <div class="home">
    <h-button>組件使用</h-button>
  </div>
</template>
<script>
export default {
  name: "Home",
  components: {},
};
</script>

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

相關(guān)文章

  • 在Vue中使用deep深度選擇器修改element UI組件的樣式

    在Vue中使用deep深度選擇器修改element UI組件的樣式

    這篇文章主要介紹了在Vue中使用deep深度選擇器修改element UI組件的樣式,本文分為兩種方法給大家介紹,在這小編比較推薦使用第二種使用 deep 深度選擇器,感興趣的朋友跟隨小編一起看看吧
    2022-12-12
  • vite+vue3項(xiàng)目啟動(dòng)報(bào)錯(cuò)Unexpected?“%“問題及解決

    vite+vue3項(xiàng)目啟動(dòng)報(bào)錯(cuò)Unexpected?“%“問題及解決

    這篇文章主要介紹了vite+vue3項(xiàng)目啟動(dòng)報(bào)錯(cuò)Unexpected?“%“問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • vue中elementUI表單循環(huán)驗(yàn)證方式

    vue中elementUI表單循環(huán)驗(yàn)證方式

    這篇文章主要介紹了vue中elementUI表單循環(huán)驗(yàn)證方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue打包上傳服務(wù)器刷新404問題的兩種方案

    vue打包上傳服務(wù)器刷新404問題的兩種方案

    這篇文章主要給大家介紹了關(guān)于vue打包上傳服務(wù)器刷新404問題的兩種方案,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法詳解

    Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法詳解

    這篇文章主要為大家詳細(xì)介紹了Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2024-03-03
  • Vue.js?的過濾器你了解多少

    Vue.js?的過濾器你了解多少

    這篇文章主要為大家詳細(xì)介紹了Vue.js?的過濾器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
    2022-02-02
  • Vue3 編寫自定義指令插件的示例代碼

    Vue3 編寫自定義指令插件的示例代碼

    這篇文章主要介紹了Vue3 編寫自定義指令插件的示例代碼,主要包括編寫自定義插件,在 main.ts 中加載啟用插件的代碼介紹,對(duì)Vue3自定義指令插件相關(guān)知識(shí)感興趣的朋友一起看看吧
    2022-07-07
  • 利用vue.js實(shí)現(xiàn)被選中狀態(tài)的改變方法

    利用vue.js實(shí)現(xiàn)被選中狀態(tài)的改變方法

    下面小編就為大家分享一篇利用vue.js實(shí)現(xiàn)被選中狀態(tài)的改變方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2018-02-02
  • vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法

    vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法

    下面小編就為大家分享一篇vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧
    2018-03-03
  • 一個(gè)手寫的vue放大鏡效果

    一個(gè)手寫的vue放大鏡效果

    這篇文章主要介紹了一個(gè)手寫的vue放大鏡,組件使用less,文中給出了示例代碼,需要的朋友可以參考下
    2019-08-08

最新評(píng)論