Vue插件的创建使用

最新推荐文章于 2024-11-15 23:43:34 发布

原创最新推荐文章于 2024-11-15 23:43:34 发布 · 306 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

本文介绍了Vue组件的核心概念，强调其可复用性，并阐述了使用组件带来的便利。接着，文章探讨了Vue插件的用途，指出它们能提供全局功能，提高开发效率。最后，教程展示了如何创建Vue组件和一个简单的插件，指导读者实践。

什么是Vue的组件

组件是Vue中非常重要的概念，是一个可以重复使用的Vue，是可以重复使用的Vue实例，它拥有独一无二的组件名称，它可以扩展HTML元素，以组件名称的方式作为自定义的HTML标签。

使用Vue组件的好处

因为组件是可复用的，在绝大多数网页中，很多时候一个项目中的多个页面，可能仅仅是页面元素设计称的一个个组件，所以当需要使用到的时候，直接引用组件即可

创建Vue组件

1.使用 Vue.extend 来创建全局的Vue组件 
2. var com1 = Vue.extend({
   template: '<h3>这是使用 Vue.extend 创建的组件</h3>' // 通过 template 属性，指定了组件要展示的HTML结构
   })
   template中只能有一个根节点
3.使用 Vue.component('组件的名称', 创建出来的组件模板对象)
    Vue.component('myCom1', com1)
    如果使用 Vue.component 定义全局组件的时候，组件名称使用了 驼峰命名
    如果不使用驼峰,则直接拿名称来使用即可;
     Vue.component('mycom1', com1)
     Vue.component 第一个参数:组件的名称,将来在引用组件的时候,就是一个 标签形式 来引入 它的
    第二个参数: Vue.extend 创建的组件  ,其中 template 就是组件将来要展示的HTML内容
    Vue.component('mycom1', Vue.extend({
      template: '<h3>这是使用 Vue.extend 创建的组件</h3>'
    }))

以下给个实例

<template>
	<div class="tabs">
		<router-link to="/" class="link ahome">首页</router-link>
		<router-link to="/find" class="link afind">发现</router-link>
		<router-link to="/cart" class="link acart">购物车</router-link>
		<router-link to="/user" class="link auser">我的</router-link>
	</div>
</template>


</style>

<BottomNav class="tabs" v-if="!$route.meta.nofoot"></BottomNav> //html部分
import BottomNav from "@/components/BottomNav.vue"; //js部分
	export default {
		components: {
			BottomNav,
		},
	};

Vue插件

vue的插件是为应用添加全局功能的一种强大而又简单的方式;vue插件是使用vue开发的一些工具,在调用时只需要很少的代码就能实现需要的效果,便于后期维护和提升开发效率;插件一般用于添加全局方法或property、添加全局资源、通过全局混入来添加一些组件选项等等。

创建

这里也介绍一种最简单的插件进行介绍，该插件是加载插件
首先前提是有一个vue的项目
第一步：创建一个组件文件文件名随意但是要自己注意之后的命名
第二步：创建一个js文件
在这里插入图片描述

.vue中的代码
<template>
	<div class="toast" v-if="msg">
		{{msg}}
	</div>
</template>

<script>
	export default{
		data(){
			return{msg:""}
		},
		methods:{
			show(str="加载中...",delay=2000){
				this.msg=str
				setTimeout(()=>this.hide(),delay)
			},
			hide(){
				this.msg=""
			}
		}
	}
</script>
.js中的代码
// 01 导入组件
import ToastVue from './ToastCom.vue'
// 定义一个插件他是一个对象
var Toast = {}
// Vue的插件必须实现install方法
Toast.install = function(Vue) {
	var ToastCom=Vue.extend(ToastVue)
	var instance=new ToastCom;
	instance.$mount(document.createElement("div"))
	document.body.appendChild(instance.$el)
	Toast.show=instance.show;
	Toast.hide=instance.hide;
	Vue.prototype.$toast=Toast
}

// 导出插件
export default Toast;