【Vue】第九部分 Vue一些高级知识点
文章目录
9.1 ref属性
-
作用：用来给元素或子组件注册引用信息（相当于是id的替代者）
-
使用方式
打标识：<h1 ref = "xxx"></h1>
获取：this.$refs.xxx
- 被应用在组件上获取的事件为该组件的实例对象（vc），被应用在html标签上获取的是真实的DOM元素
绑定在html标签上
<template>
<div>
<h1>欢迎来学习Vue！</h1>
<h2>学校的名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showEle" ref="title">点击我查看DOM元素</button>
</div>
</template>
<script>
export default {
data(){
return{
name:"清华大学",
address:"北京"
}
},
methods:{
showEle(){
console.log(this.$refs.title); //真实的DOM元素
}
}
};
</script>
绑定在组件上
<template>
<div>
<school ref="sch"></school>
<br>
<button @click="showvc">点击我查看school组件的实例对象</button>
</div>
</template>
<script>
import school from "./components/school.vue"
export default {
components:{school},
methods:{
showvc(){
console.log(this.$refs.sch); //schoool组件的实例对象
}
}
}
</script>
9.2 props的配置项
作用：用于组件==接收==外部传过来的数据
有三种方式：
-
只接收外部的数据
props:['anme','age'] -
限制数据的类型
props:{name:String,age:Number} -
限制类型，限制必要性，指定默认值
props:{ name:{ type:String, required:true }, age:{ type:Number, required:false, default: 99 } }
注意：props是只读的，Vue底层会监测你对props的修改（浅层次监视），如果进行了修改，就会发出警告，若业务需求确实 需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。
<template>
<div class="wrapper">
<h1>{{msg}}</h1>
<h2>以下是我的个人信息</h2>
<h3>学生姓名:{{name}}</h3>
<h3>性别:{{sex}}</h3>
<h3>年龄:{{modifyage+1}}</h3>
<button @click="modifyage++">点击我年龄加1</button>
</div>
</template>
<script>
export default {
data(){
return {
msg:"大家好！我是一名学生",
modifyage:this.age
/*
为什么可以看的到age是因为props的优先级
高，会先执行外部传进来的数据所以可以看得到
*/
}
},
props:{
name:{
type:String,
required:true
},
age:{
type:Number,
required:true,
default: 99
},
sex:{
type:String,
required:true,
}
}
}
</script>
<style>
.wrapper{
background-color: antiquewhite;
color: cadetblue;
}
</style>
9.3 mixin（混入）
作用：可以把多个组件共用的配置提取成一个混入对象
在这里我创建一个mixin.js文件，以下是代码：
//将共同的方法和数据放在一起
export const mixin = {
methods:{
showinfo(){
alert(this.name);
}
},
data(){
return {
x:100,
y:200
}
}
}
第一步导入：
在需要使用的组件中导入(局部导入)
import {mixin} from "../mixin.js";
如果要使用全局mixin，就需要导入到main.js文件里（全局导入）
第二步使用：
- 全局混入：
Vue.mixin(xxx) - 局部混入：
mixins:['xxx']
全局mixin：
import Vue from "vue"
import App from "./App.vue"
Vue.config.productionTip = false //阻止vue在生成时自动产生提示
import {mixin} from "./mixin" //导入
Vue.mixin(mixin) //使用
new Vue({
el: '#app',
data: {
},
render:h=>h(App)
})
局部mixin：
<template>
<div>
<h1 @click="showinfo">学校信息</h1>
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</template>
<script>
import { mixin} from "../mixin.js"; //导入
export default {
props:["name","address"],
// 要写成数组的形式，即使一个也要写成数组的形式
mixins:[mixin,mixin2] //使用
}
</script>
9.4 Vue插件
-
功能：用于增强Vue
-
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
-
定义插件：
对象.install = function (Vue, options) { // 1. 添加全局过滤器 Vue.filter(....) // 2. 添加全局指令 Vue.directive(....) // 3. 配置全局混入(合) Vue.mixin(....) // 4. 添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx }4.使用插件
vue.use()
main.js
import Vue from "vue";
import App from "./App.vue";
//引入插件
import plugins from "./plugins";
Vue.config.productionTip = false; //关闭Vue的生产提示
//应用（使用）插件,可以在后面传参数
Vue.use(plugins, 1, 2, 3);
//创建vm
new Vue({
el: "#app",
render: (h) => h(App),
});
组件中使用
<template>
<div>
<h2>学校名称：{{ name | mySlice }}</h2>
<h2>学校地址：{{ address }}</h2>
<button @click="test">点我测试</button>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "清华大学",
address: "北京",
};
},
methods: {
test() {
console.log(this.name)
},
},
};
</script>
创建一个plugins.js文件，以下里面的代码：
export default {
install(Vue, x, y, z) {
console.log(x, y, z);
//全局过滤器
Vue.filter("mySlice", function (value) {
return value.slice(0, 4);
});
//定义全局指令
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,
};
},
});
//给Vue原型上添加一个方法（vm和vc就都能用了）
Vue.prototype.hello = () => {
alert("你好啊");
};
},
};
9.5 scoped样式
- 作用：让样式在局部生效，防止类名冲突。
- 写法：
<style scoped>
9.6 nextTick（经常用）
- 语法：
this.$nextTick(回调函数) - 作用：在下一次 DOM 更新结束后执行其指定的回调。
- 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
举个例子：比如获取焦点
总结
以上就是今天要讲的内容，本文一些Vue高级部分的知识点，希望对大家有所帮助！