vue自定义插件(全局组件),以及向插件传值

1 编写子组件

load.vue内容

<template>
<div>
Load...
</div>
</template>
<script></script>
<style>
</style>

Tree.vue内容:

<template>
<div><h1>{{logo}}</h1><el-select
v-model="value10"
multiple
filterable
allow-create
default-first-option
placeholder="请选择文章标签">
<el-option
v-for="item in options5"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select></div>

</template>

<script>
export default {
data() {
return {
options5: [{
value: 'HTML',
label: 'HTML'
}, {
value: 'CSS',
label: 'CSS'
}, {
value: 'JavaScript',
label: 'JavaScript'
}],
value10: []
}
},
created: function () {
console.log("logo : " + this.logo);
},
props: ['logo']
}
</script>

index.js内容

import LoadComponent from './Load.vue';
import TreeComponent from './Tree.vue';

const Load={
install:function (Vue) {
Vue.component('Load',LoadComponent);
Vue.component('Tree',TreeComponent);
}
}
export default Load

2 在main.js中引入插件

3 在父组件中使用