一、插件的使用

总结：创建一个组件（不在父组件中直接使用），

          （根据组件）创建一个插件（即在插件中，全局注册组件），

           在父组件中启用插件。

------------------------------------------------------------------------------------------------------------

 

1、在src》components》创建文件夹my-button》创建组件.vue文件button.vue》

   在模板template中，创建一个带有默认插槽值的button按钮。

<button class="btn"><slot>按钮</slot></button>

2、在src》App.vue》

   （1）导入组件：import MyButton from './components/my-button/button'

import MyButton from './components/my-button'

   （2）局部注册组件：MyButton

Vue.use(MyButton);

   （3）模板中引用组件：<my-button></my-button>

<my-button></my-button>
<my-button>提交</my-button>

3、输入以下命令，运行项目：

   npm  run  serve

4、在src》components》my-button》创建插件.js文件index.js》

    （1）导入组件：import MyButton from "./button"

import MyButton from "./button"

    （2）默认导出一个方法：

         export default{

             install(Vue){

             }

         }

    （3）在默认导出的方法中，全局注册组件：Vue.component("my-button",MyButton);

export default{
    install(Vue){
        Vue.component("my-button",MyButton);
    }
}

5、在src》App.vue》

    （1）导入Vue组件：import Vue from "vue"

    （2）导入插件：import MyButton from './components/my-button'

    （3）启用插件：Vue.use(MyButton);

    （4）模板中引用组件：<my-button></my-button>