vue 全局引用公共的組件以及公共的JS文件問題
全局引用公共的組件及公共的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組件的樣式,本文分為兩種方法給大家介紹,在這小編比較推薦使用第二種使用 deep 深度選擇器,感興趣的朋友跟隨小編一起看看吧2022-12-12vite+vue3項(xiàng)目啟動(dòng)報(bào)錯(cuò)Unexpected?“%“問題及解決
這篇文章主要介紹了vite+vue3項(xiàng)目啟動(dòng)報(bào)錯(cuò)Unexpected?“%“問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03vue中elementUI表單循環(huán)驗(yàn)證方式
這篇文章主要介紹了vue中elementUI表單循環(huán)驗(yàn)證方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法詳解
這篇文章主要為大家詳細(xì)介紹了Vue2實(shí)現(xiàn)自適應(yīng)屏幕大小的兩種方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03利用vue.js實(shí)現(xiàn)被選中狀態(tài)的改變方法
下面小編就為大家分享一篇利用vue.js實(shí)現(xiàn)被選中狀態(tài)的改變方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-02-02vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法
下面小編就為大家分享一篇vue.js移動(dòng)數(shù)組位置,同時(shí)更新視圖的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-03-03