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

妖狐艹你老母 2022-02-27 05:05 328阅读 0赞

1 编写子组件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70]  
load.vue内容

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中引入插件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 1]  
3 在父组件中使用  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70]: /images/20220227/55e1104303f84da1b83b0d504ca280b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 1]: /images/20220227/af22e06ac7fe4aa899e9180fd7d7b978.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211c2lfbQ_size_16_color_FFFFFF_t_70 2]: /images/20220227/6425254071604e729416e4f9405b2c43.png