Vue组件与插件

一个菜鸟大学生

已于 2022-10-16 13:57:53 修改

阅读量1k

点赞数 1

文章标签： javascript vue.js 前端前端框架

于 2022-10-16 13:56:50 首次发布

本文链接：https://blog.csdn.net/m0_68907098/article/details/127346435

版权

Vue组件与Vue插件

组件与插件的区别：

1.组件注册通过components:{TabView}进行注册，而插件通过Vue.use()进行注册.
2.组件是构成App的业务模块，也可以说是架构吧，比如小米网页的底部栏就是一个组件，而插件是属于功能模块，个人理解组件就类似与Html,而插件类似于Js.

组件：

组件就是把一个app或者一个网站的页面给分割成一个个的小的模块，比如导航栏，轮播图，底部栏等等，这每个小模块就是一个组件，通过最后的一个组件汇总到App.vue通过一个Vue文件进行管理也就能组合成一个页面，其实每个.Vue文件都可以看做是一个组件。

组件的创建

1.在创建组件的时候，我们一般会创建一个components的文件夹，他就是组件的意思，这里存放所有的组件方便管理，
2.创建一个.vue文件，名字随便起，但是要注意，名字一定要含有两个大驼峰，也就是含有两个不连续的大写字母，比如：UserView.vue,LoginView.vue,
在这里插入图片描述
3.创建好.vue文件之后就是写组件了，一个组件通常包含三个部分：

<template>
  <div>存放内容的部分</div>
</template>
<script>
    export default{
    存放方法的地方
    }
   
</script>
<style>
    存放样式的地方
</style>

其实这样我们就已经写好了一个组件，接下来就是使用组件了。

组件的使用

我们在使用组件的时候通常会在App.vue文件里面使用，App.vue文件就类似于一个老大哥，每个组件都可以归他管理。在上文我也说过每个.vue文件都可以看做是一个组件App.vue也不例外，所以它也包含了三个部分

<template>
  <div>
      //3.使用组件
      <LoginView></LoginView>
  </div>
</template>
<script>
//1.首先要导入组件
import LoginView from '@/component/LoginView.vue'
    export default{
    //2.然后注册组件
      components:{LoginView} //注册
    }
   
</script>
<style>
    存放样式的地方
</style>

这样我们就成功的注册了一个组件，并使用了一个组件，特别需要注意的一点是，1,.vue文件名要遵循大驼峰写法，不然会出现报错，如果更改了文件名之后需要重新启动一下服务器。 2 ,每个template都有且只能有一个根节点

插件：

插件通常是同来为Vue添加全剧功能的，插件的功能范围没有严格的限制，我们最常用的就是添加Vue实例方法，通过把他们添加到Vue.prototype上实现，

编写插件：

1.我们需要建立一个plugin文件夹，它就是插件的意思，把插件统一放在一起
在这里插入图片描述

import ToastVue from "./ToastCom.vue";

// 定义一个插件
var Toast = {};
// Vue 的插件 必须实现 install 方法
Toast.install = function (Vue，options) {
    // 02 获取组件的构造函数
    var ToastCom = Vue.extend(ToastVue);
    //03 创建组件的实例
    var instance = new ToastCom();
    //04 挂载到 真实 的dom
    instance.$mount(document.createElement("div"));
    //05 插入到body
    document.body.appendChild(instance.$el);
    //06 关联 Toast 插件
    Toast.show = instance.show;
    Toast.hide = instance.hide;

    //把当前对象挂载到Vue 的原型上
    //Vue 所有的组件和实例都可以使用 $toast 方法
    Vue.prototype.$toast = Toast;
};

// 导出插件
export default Toast;

Vue插件的实现应该暴露出一个install方法。这个方法的第一个参数是Vue构造器（构造器可以理解为就是构造函数），第二个参数是一个可选的选项对象

插件注册

2.回到main.js文件夹下，我们需要注册插件

import Toast from "@/plugin/Toast/index.js";
//使用插件 （执行Toast 的 install方法）
Vue.use(Toast);

插件使用

    methods: {
        login() {
        //这里的this指的是vue实例，因为在编写插件的时候我们将插件挂在到了vue的原型上了，所以在这里可以直接访问的到
            this.$toast.show();
          }

总结:我们使用组件的时候使用的是组件的本身，而使用插件的时候，我们其实是使用了插件身上的方法，所以我说组件是结构模块，类似于我们所学过的Html,而插件是功能模块，更类似与我们所学的js