1.组件-插槽:
当组件内某一部分标签不确定怎么办?
用插槽技术
插槽的使用
组件内用占位
使用组件时,传入具体标签插入
插槽的运行效果?
传入的标签会替换掉slot显示
具名插槽:
概念: 一个组件内两处以上需要外部传入标签的地方
语法: slot使用name属性去分名字
template标签配合v-slot:名字分发对应的标签
v-slot:简写 #
使用步骤
组件内:slot占位.设置name属性用于区分
使用者:template 配合v-slot:name来替换slot
作用域插槽
概念: 使用插槽是,想使用子组件内变量
口诀:
子组件,在slot上绑定属性和子组件内的值
使用组件,传入自定义标签,用template和v-slot='自定义变量名'
scope变量名自动绑顶slot上所有属性和值
2.组件自定义指令:
局部注册:只在当前组件中使用
```js
<template>
<div>
<!-- <input type="text" v-gfocus> -->
<input type="text" v-focus>
</div>
</template>
<script>
// 目标: 创建 "自定义指令", 让输入框自动聚焦
// 1. 创建自定义指令
// 全局 / 局部
// 2. 在标签上使用自定义指令 v-指令名
// 注意:
// inserted方法 - 指令所在标签, 被插入到网页上触发(一次)
// update方法 - 指令对应数据/标签更新时, 此方法执行
export default {
data(){
return {
colorStr: 'red'
}
},
directives: {
focus: {
inserted(el){
el.focus()
}
}
}
}
</script>
<style>
</style>
```
全局注册:所有指令都可以使用
```js
// 全局指令 - 到处"直接"使用
Vue.directive("gfocus", {
inserted(el) {
el.focus() // 触发标签的事件方法
}
})
```
3.$refs-获取DOM
利用 ref 和 $refs 可以用于获取 dom 元素
使用:
<template>
<div>
<p>1. 获取原生DOM元素</p>
<h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>
</div>
</template>
<script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
export default {
mounted(){
console.log(document.getElementById("h")); // h1
console.log(this.$refs.myH); // h1
}
}
</script>
<style>
</style>
vue如何能否获取到组件对象?
可以 目标组件添加ref属性
this,$refs.名字获取组件对象
4.$nextTick
点击改变data,获取原生DOM内容
等DOM更新后,触发次方法里函数体执行
- 语法:this.$nexTick(函数体)
5.v-model原理
v-model实际上实现的是什么?
1.向标签内的value属性赋值
2.给标签绑定input事件, 并把收到的值, 赋予给vue变量
3.v-model起始就是使用v-bind绑定value数据+ v-on 绑定input事件 并把值赋值给了变量
