vue怎么自己创建组件并引用_Vue 实现创建全局组件,并且使用Vue.use() 载入方式
自定義vue組件，一般是局部引用的方式載入，使用的時(shí)候，在應(yīng)用的組件中使用 import moduleName from ‘module' 導(dǎo)入，在components中注冊
{{info.title}}
import comment from "../sub/comment.vue";
export default {
data() {
return {
info: {},
id: this.$route.query.id
};
},
methods: {},
components: {
comment
},
那么如果某個(gè)組件經(jīng)常復(fù)用，豈不是每次在新組建中引用都要導(dǎo)入一次嗎？是的 。這種情況下可以將組件封裝成全局組件，一次導(dǎo)入之后，全局都可以使用。 雖然這種做法不太常見，但是這里還是將其整理出來。
1.首先創(chuàng)建一個(gè)文件夾loading
用來保存需要全局引用的組件，并且存放一些配置文件。
2.創(chuàng)建一個(gè)loading.vue的組件。
該組件中除了組件的基礎(chǔ)結(jié)構(gòu)，并無其他內(nèi)容。它的作用是用來加載準(zhǔn)備自定義的組件，最后將loading組件加載到全局的Vue中，這樣就一次性完成了所有自定義組件的加載，非常方便。
export default {
data() {
return {};
},
methods: {}
};
3.創(chuàng)建自定義組件
這里以一個(gè)簡單封裝的mint-ui輪播圖為例。
export default {
name: "navbar",
props: ["list"], //接收父組件數(shù)據(jù)
data() {
return {
};
},
methods: {
detail(e) {
var id = e.target.dataset.id;
var url = `/GoodsInfo/${id}`;
this.$router.push(url);
}
},
created() {}
};
.mint-swipe {
height: 150px;
}
.mint-swipe img {
width: 100%;
}
4.創(chuàng)建index.js，用來導(dǎo)出所有自定義組件。
import turns from './turns.vue'
const loading = {
install: function (Vue) {
Vue.component('turns', turns)
}
}
export default loading;
其實(shí)到這里組件封裝就結(jié)束了，下面再演示下如何使用。
5.在main.js中，導(dǎo)入并使用loading組件。
import loading from './lib/loading';
Vue.use(loading);
這樣就將組件全局引用成功了！
6.在需要使用的地方，直接使用組件名即可。
通過這種方式，就能實(shí)現(xiàn)組件的全局引用。
這種做的好處是對于復(fù)用性非常高的組件，省去了每次導(dǎo)入的麻煩；
缺點(diǎn)是無法直觀的看到組件引入和注冊，對于不清楚的人來說看不懂組件名的意義。
其實(shí)官方文檔中已經(jīng)提到了一種解決方案：
基礎(chǔ)組件的自動化全局注冊
可能你的許多組件只是包裹了一個(gè)輸入框或按鈕之類的元素，是相對通用的。我們有時(shí)候會把它們稱為基礎(chǔ)組件，它們會在各個(gè)組件中被頻繁的用到。
所以會導(dǎo)致很多組件里都會有一個(gè)包含基礎(chǔ)組件的長列表：
import BaseButton from ‘./BaseButton.vue' import BaseIcon from
‘./BaseIcon.vue' import BaseInput from ‘./BaseInput.vue'
export default { components: {
BaseButton,
BaseIcon,
BaseInput } }
而只是用于模板中的一小部分：
幸好如果你使用了 webpack (或在內(nèi)部使用了 webpack 的 Vue CLI 3+)，那么就可以使用 require.context 只全局注冊這些非常通用的基礎(chǔ)組件。這里有一份可以讓你在應(yīng)用入口文件 (比如 src/main.js) 中全局導(dǎo)入基礎(chǔ)組件的示例代碼：
import Vue from ‘vue' import upperFirst from ‘lodash/upperFirst'
import camelCase from ‘lodash/camelCase'
const requireComponent = require.context( // 其組件目錄的相對路徑
‘./components', // 是否查詢其子目錄 false, // 匹配基礎(chǔ)組件文件名的正則表達(dá)式
/Base[A-Z]\w+.(vue|js)$/ )
requireComponent.keys().forEach(fileName => { // 獲取組件配置 const
componentConfig = requireComponent(fileName)
// 獲取組件的 PascalCase 命名 const componentName = upperFirst(
camelCase(
// 剝?nèi)ノ募_頭的 ./ 和結(jié)尾的擴(kuò)展名
fileName.replace(/^./(.*).\w+$/, ‘$1')
) )
// 全局注冊組件 Vue.component(
componentName,
// 如果這個(gè)組件選項(xiàng)是通過 export default 導(dǎo)出的，
// 那么就會優(yōu)先使用 .default，
// 否則回退到使用模塊的根。
componentConfig.default || componentConfig ) })
補(bǔ)充知識：vue組件注冊 Vue.extend Vue.component Vue.use的使用 以及組件嵌套
我就廢話不多說了，大家還是直接看代碼吧~
/**
* vue.extend用法
* 使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類”。參數(shù)是一個(gè)包含組件選項(xiàng)的對象。
* 注意：此實(shí)例可以掛載到根實(shí)例之外
*/
const Profile = Vue.extend({
template: '
{{firstName}} {{lastName}} aka {{alias}}
',data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 創(chuàng)建 Profile 實(shí)例，并掛載到一個(gè)元素上。
new Profile().$mount('#opp')
let navbar = {
template: `
data:()=>{
return {
}
},
mounted() {
console.log(this.$parent)
}
};
const MyPlugin = {
install:(vue, arguments)=>{
console.log(arguments);
vue.component('navbar', navbar);
}
}
Vue.use(MyPlugin, {a:1, b:2}); // 組件注冊成功
// logo組件
Vue.component("logo", {
template: `
`,
inject: ['logoSrc'],
data:()=>{
return {
}
},
mounted() {
console.log(this.$parent)
}
})
// header組件 組件調(diào)用 provie inject傳值
Vue.component("buttoncounter", {
template: `
{{header}}
`,provide:{
logoSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582433251882&di=de459decf2e157552b97a4879ae4135d&imgtype=0&src=http%3A%2F%2Fwww.suntop168.com%2Fblog%2Fzb_users%2Fupload%2F2014%2F2%2Fadf89182.jpg'
},
data:()=>{
return {
header:'我是頭部導(dǎo)航欄'
}
},
mounted() {
console.log(this.$parent)
}
});
// vue根實(shí)例
let vm = new Vue({
el:"#app",
data:{
name: 'Marry'
},
mounted(){
console.log('vue根實(shí)例初始化完畢')
}
})
console.log(vm);
以上這篇Vue 實(shí)現(xiàn)創(chuàng)建全局組件,并且使用Vue.use() 載入方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
總結(jié)
以上是生活随笔為你收集整理的vue怎么自己创建组件并引用_Vue 实现创建全局组件,并且使用Vue.use() 载入方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue 下拉框筛选列表_vue下拉菜单选
- 下一篇： mchain r语言_【揭秘】Mchai