自定义全局插件 组件

Posted 2022-12-05 jiguiyan

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

使用指令创建项目：

 

 

 

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

 

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

 

 

 

在官网中有这样的部分：

 

 

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

 

 myButton.vue

 1 <template>
 2     <div class="mybtn">
 3         
 4         <button>name</button>
 5     </div>
 6 </template>
 7 
 8 <script>
 9     export default
10     data()
11         return
12             name:this.btnName
13         
14     ,
15     props:
16         btnName:
17             type:String,
18             default:‘确认‘
19             
20             
21         
22         
23         
24     
25     
26 </script>
27 
28 <style>
29 button
30     
31     width:150px ;
32     height: 35px;
33     font-size: 18px;
34     font-weight: 700;
35     color: rgb(53,73,93);
36     background-color: rgb(65,184,131);
37 
38 </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事件：

 1 <template>
 2   <div class="home">
 3     <img alt="Vue logo" src="../assets/logo.png" />
 4     <h1>msg</h1>
 5     <mybtn btnName="about Button" @click.native="changeName"></mybtn>
 6   </div>
 7 </template>
 8 
 9 <script>
10 
11 
12 
13 export default 
14   name: "home",
15  methods:
16      changeName()
17          this.msg="home"
18      
19  ,
20  data()
21      return
22          msg:"欢迎来到perfect*博客园"
23      
24  
25  
26 ;
27 </script>

加入监听事件

 

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

实现的效果：