文章目录
- 1、插件的基本介绍
- 2、实际应用
-
- 2.1 目录结构
- 2.2 代码实例
-
- 2.2.1 学校组件（School.vue）
- 2.2.2 学生组件（Student.vue）
- 2.2.3 定义的插件
- 2.2.4 App.vue （汇总定义的组件）
- 2.2.5 main.js中引入组件
- 3、测试效果
- 4、什么是mixin(混入)
1、插件的基本介绍
1、功能：用于增强Vue
2、本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
3、定义插件：
对象.install = function (Vue, options) { // 1. 添加全局过滤器 Vue.filter(....) // 2. 添加全局指令 Vue.directive(....) // 3. 配置全局混入(合) Vue.mixin(....) // 4. 添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx }4、在main.js中
使用插件：Vue.use()
2、实际应用
2.1 目录结构
2.2 代码实例
2.2.1 学校组件（School.vue）
<template>
<div class="demo">
<h2>学校名称：{
{ name | mySlice}}</h2>
<h2>学校地址：{
{ address }}</h2>
<input type="text" v-fbind:value="name">
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "长沙大学真不赖",
address: "湖南长沙",
};
},
methods: {
showName() {
alert(this.name);
},
},
};
</script>
<style>
.demo {
background-color: pink;
}
</style>
2.2.2 学生组件（Student.vue）
<template>
<div>
<h2>学生姓名：{
{ name }}</h2>
<h2>学生性别：{
{ sex }}</h2>
<h2>学生年龄：{
{ studentAge }}</h2>
<button @click="modifiAge">修改学生年龄</button>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
name: "zyz",
sex: "男",
studentAge: 18,
};
},
methods: {
modifiAge() {
this.studentAge++;
},
},
};
</script>
2.2.3 定义的插件
const plugin = {
install(Vue) {
//定义全局过滤器
Vue.filter('mySlice', function (value) {
return value.slice(0, 5)
})
//定义全局指令
Vue.directive('fbind', {
//指令与元素成功绑定时（一上来）
bind(element, binding) {
element.value = binding.value
},
//指令所在元素被插入页面时
inserted(element, binding) {
element.focus()
},
//指令所在的模板被重新解析时
update(element, binding) {
element.value = binding.value
}
})
//定义混入
Vue.mixin({
data() {
return {
x: 100,
y: 200
}
},
})
}
}
export default plugin
2.2.4 App.vue （汇总定义的组件）
<template>
<div>
<Student/>
<hr />
<School/>
</div>
</template>
<script>
//引入组件
import School from "./components/School.vue";
import Student from "./components/Student.vue";
export default {
name: "App",
components: {
School,
Student,
},
};
</script>
2.2.5 main.js中引入组件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import plugin from './plugins'
Vue.use(plugin)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
3、测试效果
4、什么是mixin(混入)
1、功能：可以把多个组件共用的配置提取成一个混入对象(便于维护、共用部分抽取出来、同时提高代码复用)
2、使用方式：
第一步定义混合：
{ data(){....}, methods:{....} .... }第二步使用混入：
全局混入：
Vue.mixin(xxx)
局部混入：mixins:['xxx']
