自定义全局插件 组件

官网地址：https://cn.vuejs.org/v2/guide/plugins.html

使用指令创建项目：

 

 

 

运行项目，看项目能否正常运行：

 

 运行结果说明项目能正常运行：

 

 

 

在官网中有这样的部分：

 

 

在生成的项目中新建该目录：

 

 myButton.vue

<template>
    <div class="mybtn">
        
        <button>{{name}}</button>
    </div>
</template>

<script>
    export default{
    data(){
        return{
            name:this.btnName
        }
    },
    props:{
        btnName:{
            type:String,
            default:'确认'
            
            
        }
        
        
    }
    }
</script>

<style>
button{
    
    width:150px ;
    height: 35px;
    font-size: 18px;
    font-weight: 700;
    color: rgb(53,73,93);
    background-color: rgb(65,184,131);
}
</style>

myButton.js

import mybtn from './myButton.vue'


export default{
    
    install:function(Vue){
        
        Vue.component('mybtn',mybtn);
        
    }
}

main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import mybtn from './custom/myButton.js'



Vue.use(mybtn)

Vue.config.productionTip = false;

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

About.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <mybtn btnName="about Button"></mybtn>
  </div>
</template>

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <mybtn btnName="about Button"></mybtn>
  </div>
</template>

<script>



export default {
  name: "home",
 
};
</script>

 

 

从效果图中看出问题：

 

 

 问题描述：点击button的时候没有发生任何改变

解决问题方法：

Home.vue

在button中加入一个click事件：

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <h1>{{msg}}</h1>
    <mybtn btnName="about Button" @click.native="changeName"></mybtn>
  </div>
</template>

<script>



export default {
  name: "home",
 methods:{
     changeName(){
         this.msg="home"
     }
 },
 data(){
     return{
         msg:"欢迎来到perfect*博客园"
     }
 }
 
};
</script>

 

其中    .native 监听组件根元素的原生事件

实现的效果：