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

慕思m

于 2019-03-26 20:53:23 发布

阅读量2.2k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/musi_m/article/details/88829935

版权

vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用Vue编写的简单子组件实例，包括加载组件Load.vue和树形选择组件Tree.vue的实现方式。Load.vue用于显示加载提示，而Tree.vue则实现了多选下拉框的功能，允许用户选择HTML、CSS或JavaScript作为选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 在父组件中使用