Vue学习（十二）标签、配置项和自定义插件
文章目录
- ref标签
- props配置项
- mixin（混合/混入）
- 插件
ref标签
- 被用来给元素或子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象
- 使用方式，打标记：
…
或；获取：this.$refs.xxx
<template>
<div class="school">
<h2>学习名称：{{name}}</h2>
<h2>学习地址：{{address}}</h2>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "尚硅谷",
address: "北京昌平"
}
},
}
</script>
<style>
.school {
background-color: gray;
}
</style>
<template>
<div>
<h1 v-text="msg" ref="msg"></h1>
<button @click="showDOM" ref="btn">点我显示上方DOM元素</button>
<School ref="sch"/>
</div>
</template>
<script>
// 引入School组件
import School from './components/School'
export default {
name: "App",
// 注册组件
components: {School},
data() {
return {
msg: "欢迎学习Vue"
}
},
methods: {
showDOM() {
console.log(this.$refs.msg); // 获取真实的DOM元素
console.log(this.$refs.btn);
console.log(this.$refs.sch); // 获取组件的实例对象
}
},
}
</script>
props配置项
接收外部传入的数据
- 传递数据：，需要传入数字类型时，使用v-bind标签，
- 接收：
(1) 第一种方式，只接收 props: [‘key’]
(2) 第二种方式，限制类型
props: {
key: type
}
(3) 第三种方式，限制类型、必要性和必填只
props: {
key: {
type: String, // 类型
required: true, // 必传
default: "default" // 设置默认值
}
}
- 备注：props是只读的，Vue监测到对props进行修改，会发出警告；如果业务需要修改，复制一份props内容到data中一份，然后修改data中的数据
<template>
<div >
<h1 v-text="msg"></h1>
<h2>姓名：{{name}}</h2>
<h2>性别：{{sex}}</h2>
<h2>年龄：{{age}}</h2>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
msg: "一个正在学Vue的人",
}
},
// 简单声明接收
// props: ["name", "age", "sex"]
// 接收的同时对类型进行限制
/* props: {
name: String,
age: Number,
sex: String
} */
// 接收同时对数据进行类型和必要性的限制
props: {
name: {
type: String, // 类型是字符串
required: true // 名字是必要的
},
age: {
type: Number,
default: 99
},
sex: {
type: String,
default: "男"
}
}
}
</script>
<template>
<div>
<student name="王老五" :age="18" ref="sch"/>
<hr>
<student name="碧莲" sex="女" ref="sch"/>
</div>
</template>
<script>
// 引入School组件
import Student from './components/Student.vue'
export default {
name: "App",
// 注册组件
components: {Student},
}
</script>
mixin（混合/混入）
- 功能：可以把多个组件共同的配置提取成一个混合对象
- 定义混合，在某个js中定义组件的配置项
export const mixin = {
methods: {
showName() {
alert(this.name);
}
}
}
/*
export const 混合名 = {
option // option能写和组件一样的配置项
}
*/
- 使用混合：
(1) 全局混合，在main.js中，使用 import引入混合，然后使用 Vue.mixin(xxx)进行使用
(2) 局部混合，在定义组件的时候传入配置项 mixins: [xxx] - 注意：除了生命周期钩子函数是只要写就使用，其他的配置项，组件中写得有以组件中的为主
export const mixin = {
methods: {
showName() {
alert(this.name);
}
}
}
export const mixin2 = {
data() {
return {
x: 1,
y: 2
}
},
}
<template>
<div >
<h2 @click="showName">学校名称：{{name}}</h2>
<h2>地址：{{address}}</h2>
</div>
</template>
<script>
// 引入mixin
// import {mixin, mixin2} from '../mixin'
export default {
name: "School",
data() {
return {
name: "尚硅谷",
address: "北京·昌平"
}
},
// mixins: [mixin, mixin2]
/* methods: {
showName() {
alert(this.name);
}
}, */
}
</script>
<template>
<div >
<h2 @click="showName">姓名：{{name}}</h2>
<h2>性别：{{sex}}</h2>
<h2>年龄：{{age}}</h2>
</div>
</template>
<script>
// 引入mixin，局部混合
// import {mixin} from '../mixin'
export default {
name: "Student",
data() {
return {
name: "张三",
sex: "男",
age: 18
}
},
// 局部混入
// mixins: [mixin]
/* methods: {
showName() {
alert(this.name);
}
}, */
}
</script>
// 引入Vue
import Vue from "vue";
// 引入App组件
import App from "./App"
// 引入mixin
import {mixin, mixin2} from './mixin'
// 关闭生产提示
Vue.config.productionTip = false
// 全局混合
Vue.mixin(mixin)
Vue.mixin(mixin2)
// 创建vm
new Vue({
render: h => h(App),
}).$mount("#app");
插件
- 功能：用于增强Vue，本质是包含了install方法的一个对象，install的第一个参数Vue，第二个及之后的参数是插件使用者传递的数据
- 定义插件：创建一个js文件，在其中写
对象.install = function(Vue, options) {
// 添加全局过滤器
Vue.filter(...)
// 添加全局指令
Vue.directive(...)
// 配置全局混入
Vue.mixin(...)
// 添加实例方法
Vue.prototype.$MyMethod = function () {...}
Vue.prototype.$MyProperty = xxx
}
- 使用插件，在main.js中使用import进行引入：import 插件名 from 插件地址，然后使用Vue.use(插件名)进行使用
定义
export default {
install(Vue) {
console.log("定义一个插件", Vue);
// 全局过滤器
// 自定义指令
// 全局混入
// 原型上添加方法
}
}
使用：
// 引入Vue
import Vue from "vue";
// 引入App组件
import App from "./App"
// 引入插件
import plugins from './plugins'
// 关闭生产提示
Vue.config.productionTip = false
// 使用插件
Vue.use(plugins)
// 创建vm
new Vue({
render: h => h(App),
}).$mount("#app");