Vue之插件的介绍
简介主要介绍Vue插件的概念,定义和使用。Vue的插件主要是用于增强功能,可以把它看作是一个工具库,可以提供很多强大的功能,比如一些强大的自定义指令,一些强大的工具方法,过滤器等,我们可以编写或者直接引入别人写的插件,就能获得强大的功能。Vue插件的本质是一个包含install方法的对象,install方法的第一个参数是Vue构造函数对象,第二个及以后的参数是插件使用者传递的数据。代码:main.
·
简介
主要介绍Vue插件的概念,定义和使用。
Vue的插件主要是用于增强功能,可以把它看作是一个工具库,可以提供很多强大的功能,比如一些强大的自定义指令,一些强大的工具方法,过滤器等,
我们可以编写或者直接引入别人写的插件,就能获得强大的功能。
Vue插件的本质是一个包含install方法的对象,install方法的第一个参数是Vue构造函数对象,第二个及以后的参数是插件使用者传递的数据。
代码:
main.js:在这里使用定义的插件。
//引入vue依赖
import Vue from 'vue'
//引入组件App
import App from './App.vue'
// 关闭生产提示
Vue.config.productionTip = false
//引入插件
import PowerPlugin from "./plugins/PowerPlugin"
//使用插件,使用Vue.use函数,第一个参数传引入的插件对象,第二个及以后就是用户传到插件定义的intsall方法的参数。
//调用Vue.use函数使用插件,会调用该插件的install方法。
Vue.use(PowerPlugin,"yehaocong","liaoxiaoyan")
//创建一个vue实例
new Vue({
render: h => h(App),
//配置该vue实例管理id为app的容器
}).$mount('#app')
App.vue:
<template>
<!-- 编写结构 -->
<div>
<!-- 父组件编写组件标签时,将数据以属性的方式进行传递。 -->
<student studentName="Yehaocong" :studentAge="25" :hobby="['篮球','听音乐']"></student>
<student studentName="Liaoxiaoyan" :studentAge="21" :hobby="['逛淘宝','唱歌']"></student>
</div>
</template>
<script>
import student from "./components/Student.vue"
export default {
components:{
//注册组件
student
}
}
</script>
<style>
</style>
Student.vue
<template>
<!-- 编写组件结构代码,也就是html代码 -->
<!-- 需要一个div括住,也就是只能有一个根元素,一般使用div -->
<div class="orange">
<div>学生姓名:{{studentName}}</div>
<div>年龄:{{studentAgeInData+1}}</div>
<div>爱好:{{hobby}}</div>
<button @click="addAge">修改年龄+1</button>
</div>
</template>
<script>
//交互代码编写的地方,需要暴露出去给其他地方引入
//这个需要有一点es6模块化的知识,这里一般使用默认暴露,因为这是单文件组件,只需要暴露一个组件对象,
//并且引入默认暴露的组件引入语法比较简单。
export default {
data() {
return {
//复制一份年龄数据到data中
studentAgeInData:this.studentAge
}
},
methods:{
addAge(){
//修改的是data中的年龄数据
this.studentAgeInData = this.studentAgeInData+1;
}
},
//简便写法,用于接收父组件传递过来的数据
//数组形式,里面声明属性名称即可
props:["studentName","studentAge","hobby"],
//第二种方式props写出对象的形式,属性名是接收的属性名,属性值是该属性的类型。
// props:{
// studentName:String,
// studentAge:Number,
// hobby:Array
// }
//第三种方式:也是对象形式,但是里面的属性声明也使用对象形式。
//可以限制类型、设置默认值、设置必须
// 必须与设置默认值通常只能出现一个,因为必须传递就代表没有默认值了,因为默认值只是在父组件没有传递该属性时才使用
// props:{
// studentName:{
// //设置类型
// type:String,
// //设置必须
// required:true
// },
// studentAge:{
// type:Number,
// //设置默认值为99
// default:99
// },
// hobby:{
// type:Array
// }
// }
}
</script>
<style>
/* 编写样式的地方 */
.orange{
background-color: orange;
}
</style>
插件:PowerPlugin.js:
//编写插件的实质是编写一个含有install方法的对象,并暴露出去,
export default {
//install方法的第一个参数是Vue构造函数对象,之后的参数是插件使用者传过来的参数。
install(Vue,p1,p2){
console.log(Vue);
console.log(p1);
console.log(p2);
}
}
效果:
上面的插件只是打印了一下参数,接下来,要做一些看起来有用的东西。
在该插件定义一个自定义指令,之前使用过的v-big指令吧,主要是能让数字乘10。
PowerPlugin修改为:
//编写插件的实质是编写一个含有install方法的对象,并暴露出去,
export default {
//install方法的第一个参数是Vue构造函数对象,之后的参数是插件使用者传过来的参数。
install(Vue,p1,p2){
console.log(Vue);
console.log(p1);
console.log(p2);
//这里定义一个全局自定义指令
Vue.directive("big",function(element,binding){
element.innerText = binding.value*10;
})
}
}
在Student组件中使用在插件中定义的big指令:
效果:
更多推荐
已为社区贡献4条内容
所有评论(0)