关于vue插件和组件的创建和使用

最新推荐文章于 2025-03-20 10:42:24 发布

左手js右手vue

最新推荐文章于 2025-03-20 10:42:24 发布

阅读量2.1k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/ck2018182068/article/details/127338016

版权

本文详细介绍了Vue插件的创建与使用，包括Vue.extend().vue文件的构造函数继承和手动挂载。同时，讲解了如何编写及应用提示插件Notify。在组件方面，阐述了全局组件和局部组件的定义、使用，强调了组件复用性和数据传递的重要性。

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

plugin插件

1、插件是一个对象，必须实现install办法
2、插件需要在vue文件中使用Vue.use(插件)
3、插件方法

Vue.extend(.vue文件)继承.vue文件的构造函数

 var NotifyCom = Vue.extend(NotifyVue);

instance.$mount(dom)手动挂载

 var instance = new NotifyCom();
  instance.$mount(document.createElement("div"));
  instance.$el 实例的真是dom

挂载全局


Vue.prototype.$toast=Toast
将插件挂载到全局的（所有组件的实例都将拥有拆键的方法和属性）

总体代码

import NotifyVue from "./NotifyVue.vue";
const Notify = {};
Notify.install = function (Vue) {
  var NotifyCom = Vue.extend(NotifyVue);
  var instance = new NotifyCom();
  instance.$mount(document.createElement("div"));
  document.body.appendChild(instance.$el);
  Notify.show = instance.show;
  Notify.hide = instance.hide;
  Notify.success = instance.success;
  Notify.danger = instance.danger;
  Notify.warning = instance.warning;
  Vue.prototype.$notify = Notify;
};
export default Notify;

提示插件Notify编写

在plugin创建一个文件夹notify

里面包含NotifyCom.vue和index.js俩文件

NotifyCom.vue文件编写

<template>
  <div class="notify"
       v-if="msg"
       :style="{ color: color, backgroundColor: bgColor }">
    {{ msg }}
  </div>
</template>
<style scoped>
.notify {
  height: 44px;
  line-height: 44px;
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
}
</style>
<script>
export default {
  data () {
    return {
      msg: "",
      color: "#fff",
      bgColor: "#090",
    };
  },
  methods: {
    show (msg, bgColor = "#090", color = "#fff") {
      this.msg = msg;
      this.color = color;
      this.bgColor = bgColor;
      setTimeout(() => {
        this.hide()
      }, 2000)
    },
    hide () {
      this.msg = "";
    },
    // c成功
    success (msg) {
      this.show(msg, "#090")
    },
    danger (msg) {
      this.show(msg, "#ff5500")
    },
    warning (msg) {
      this.show(msg, "#ffd606")
    }
  },
};
</script>

index.js

import NotifyVue from "./NotifyVue.vue";
const Notify = {};
Notify.install = function (Vue) {
  var NotifyCom = Vue.extend(NotifyVue);
  var instance = new NotifyCom();
  instance.$mount(document.createElement("div"));
  document.body.appendChild(instance.$el);
  Notify.show = instance.show;
  Notify.hide = instance.hide;
  Notify.success = instance.success;
  Notify.danger = instance.danger;
  Notify.warning = instance.warning;
  Vue.prototype.$notify = Notify;
};
export default Notify;

使用

在需要使用的地方插入插件例如我在登录页面，在请求到数据时提醒登陆成功，登陆失败以及网络错误

 if (res.data.code === 200) {
            this.$notify.success(res.data.msg)//使用的插件
            localStorage.setItem('token', res.data.token)
            localStorage.setItem('user', JSON.stringify(res.data.user))
            var redirect = this.$route.query.redirect || "/"
            this.$router.replace(redirect)
          } else {
            this.$notify.danger(res.data.msg)//使用的插件
            localStorage.removeItem("token")
            localStorage.removeItem("user")
          }
        }
        ).catch(err => {
          this.$notify.warning("登陆失败")//使用的插件
          console.error(err);
          localStorage.removeItem("token")
          localStorage.removeItem("user")
        })

vue组件

全局组件定义与使用

定义全局组件

需给组件一个名字，调用时，将组件名当作标签名使用；相当于自定义标签，该标签下可以包含很多子html标签；
这些子html标签定义在组件的template属性中，每次调用该组件，都渲染template里的标签
template里必须只有一个根元素
在组件中，data是函数，将数据return回去
依然可以用this来调用data中定义的数据

定义组件

① 定义一个组件，命名为my-component
② 其中包含数据：name和方法：changeName
③ 渲染出的html效果有一个p标签，包含一个按钮，点击按钮时，修改name
④ 命名规范：camelCase (驼峰命名法) 与kebab-case (短横线分隔命名)
当写成标签时，遇到有大写字母的命名，需要改成小写并用横杆链接前后两个部分，如定义组件时命名为myComponent，写成标签时应写成；
组件定义时也可以用横杆法命名；
如果定义时用myComponent，标签用是OK的，系统自动识别

使用组件

① 在vue对象对应的根元素（el指定标签）下使用
② 由于定义的是全局组件，所以可以在任意的vue对象下使用
③ 组件可复用，在一个vue对象下可以使用多次，且组件间互相独立
####局部组件定义与使用

// template仅一个根元素：ul
var msgComponent = {
	 // 数据是自身提供的 (hobbies)
    template:`<ul><li v-for='hobby in hobbies' v-bind:key='hobby.id'>{{hobby}}</li></ul>`,
    data(){
        return {
            hobbies:['看剧','看动漫','吃好吃的']
        }
    }
}

注册局部组件：

// 仅由注册过该局部组件的vue对象才能使用，此处为div#vue-app-one
// 注意命名规范，components中对象的key将会被作为标签名，多个单词拼接的命名需使用横杆法
// 可以写成msg-component，此处直接简化了命名为msg，
new Vue({
    el:"#vue-app-one",
    components:{
        "msg": msgComponent
    }
})

父向子传值/传引用：prop
静态传值
创建子组件：

var titleComponent = {
    props:["title"],
    template:`<p>{{title}}</p>`
    // 所需要的数据title由父组件提供
}

在父组件的components属性中注册子组件

new Vue({
    el:"#vue-app-one",
    components:{
        "msg": msgComponent,
        "titleComponent":titleComponent
    },
})

在父组件上使用子组件：

<!-- div#vue-app-one为父组件 -->
<div id="vue-app-one">
    <p>这里是vue-app-one</p>
    <mycomponent></mycomponent>
    <mycomponent></mycomponent>
	<!--使用子组件title-component，并传值"我的爱好："给子组件-->
    <title-component title="我的爱好："></title-component>
    <msg></msg>
</div>

动态传值：v-bind
定义子组件

var titleComponent = {
    props:["title"],
    template:`<p>{{title}}</p>`
}

在父组件的components属性中注册子组件：

new Vue({
    el:"#vue-app-one",
    components:{
        "msg": msgComponent,
        "titleComponent":titleComponent
    },
    data(){
        return {
            title:"my hobbies are ",
        }
    }
})

使用子组件，通过绑定父组件data中的变量title来实现动态传值：

<!-- div#vue-app-one为父组件 -->
<div id="vue-app-one">
    <p>这里是vue-app-one</p>
    <mycomponent></mycomponent>
    <mycomponent></mycomponent>
    <!-- 动态绑定title -->
    <title-component v-bind:title="title"></title-component>
    <msg></msg>
</div>