组件进阶,插槽,自定义指令,ref 和 $refs
v-model语法糖
v-model语法糖: v-model本质上是value属性和input事件的一层包装
作用: 通过数据双向绑定
- 数据发生变化: 页面会自动变化 v-bind:value
- 页面输入改变: 数据会自动变化 v–on:input
<input type="text" v-model="msg">
<input type="text" :value="msg" @input="msg = $event.target.value">
v-model语法糖等价于给input提供了:value属性和@input事件,每次使用input,都要提供value和input事件,很麻烦,所以使用v-model快捷,方便
v-model给组件使用
父传子使用v-model简写
- 定义组件时,接收的值使用value,子传父触发事件写input
<demo :value="money" @input="money = $event"></demo>
#简写
<demo v-model="money"></demo>
ref 和 $refs
作用: ref 和 $refs可以用于获取DOM元素,或组件实例
获取原生DOM标签
- 给需要的dom元素或组件,添加ref属性
<h1 ref="xxx">112233<h1>
<button @click="fn">按钮</button>
- 通过this.$refs.xxx获取目标标签,
methods:{
fn(){
this.$refs.xxx
}
}
通过ref属性获取组件对象
- 给目标组件,添加ref属性-名字随意
<Demo ref='de'></Demo>
- 通过this.$refs.xxx 获取组件对象,可调用组件对象里面的方法等吧
this.$refs.de.fn()
$nextTick
$nextTick:等DOM更新后, 才会触发执行此方法里的函数体
语法: this.$nextTick(函数体)
<template>
<div>
//创建标签显示数据
<button @click="show" v-if="shoe">点击显示文本框</button>
<input ref="inp" v-else type="text">
</div>
</template>
<script>
export default {
data(){
return{
shoe:true
}
},
//获取原生DOM内容(新DOM是异步的)
methods:{
show(){
this.shoe = false
this.$nextTick(() => {
this.$refs.inp.focus()
})
}
}
}
</script>
dynamic 动态组件
动态组件时可以改变的组件
动态组件可以解决多组件在同一位置,切换显示的需求
- component 组件(位置) + is 属性 (哪个组件)
- 修改 is 属性绑定的值 => 切换组件
<button @click="com = 'UserAccount'">显示账号组</button>
<button @click="com = 'Userlnfo'">显示信息组件</button>
<component :is="com"></component>
<script>
import UserAccount from './components/UserAccount.vue'
import UserInfo from './components/UserInfo.vue'
export default {
components: {
UserAccount,
UserInfo
},
data() {
return {
com: ''
}
}
}
</script>
自定义指令
自定义指令:自己定义指令, 封装dom操作,扩展额外功能
- 全局注册
Vue.directive("指令名",{
//inserted函数;当前的绑定的元素被插入到DOM树上
"inserted"(el){ //el指当前指令绑定的dom参数
//el扩展额外功能
}
})
- 局部注册
directive:{
"指令名":{
"inserted"(el){
//el进行操作
}
}
}
自定义指令-指令值
- 语法:在绑定指令时,可以通过“等号”的形式为指令绑定具体的参数值
- 通过 binding.value 可以拿到指令值,指令值修改会触发 update 函数
<div v-color="color">亮仔是个p</div>
directives: {
// 自定义一个局部指令
color: {
// inserted指令页面加载的时候执行,value结构赋值了
inserted (el, {value}) {
el.style.color = value
},
// update指令的值改变时触发执行, binding.value指令的值修改触发 // el指令绑定的元素
//binding是个对象value是它里面的属性
update (el, binding) {
el.style.color = binding.value
}
}
}
插槽
默认插槽
基本语法
- 组件内用占位
- 使用组件时两标签中间的地方,传入标签替换slot
#使用组件时<MyDialog></MyDialog>夹着的地方, 传入标签替换slot
<template>
<div>
<mydialog>
<h1>来玩啊,小朋友</h1>
</mydialog>
</div>
</template>
#组件内用<slot></slot>占位
<template>
<div>
<slot></slot>
</div>
</template>
插槽 - 后备内容
插槽后备内容:封装组件时,可以为预留的 <slot>
插槽提供后备内容
语法: 在标签内放置内容, 作为默认显示内容
效果: 外部使用组件时,不传东西,则slot会显示后备内容
外部使用组件时,传东西了,则slot整体会被换掉
具名插槽
具有名字的插槽 (配置了名字), 可以实现定向分发
一旦配置了名字, 只会接收对应的内容, 不是分发给他的, 就不要
步骤:
- 给插槽起名字
- 需要使用 template 标签, 将内容包裹成一个整体
- 通过 v-slot:插槽名, 指定具体分发给谁
- v-slot 也有缩写,把 (v-slot:) 替换为字符 #
<template>
<div>
<mydialog>
//<template v-slot:content>
#简写
<template #content>
<h1>来玩啊,小朋友</h1>
</template>
</mydialog>
</div>
</template>
<template>
<div>
<slot name="content"></slot>
</div>
</template>
作用域插槽
作用域插槽: 定义 slot 插槽的同时, 是可以传值的, 在分发内容时, 可以使用
步骤:
- 给 slot 标签, 以 添加属性的方式传值
- 所有添加的属性, 都会被收集到一个对象中
- 在template中, 通过
v-slot:插槽名= "obj"
接收 - 可以使用解构赋值简化数据的接收
<template>
<div>
<mydialog>
//<template v-slot:content>
#简写
//<template #content="obj">
<template #content="{yes, no}">
//<h1>{{obj.yes}}</h1>
//<h1>{{obj.no}}</h1>
<h1>{{yes}}</h1>
<h1>{{no}}</h1>
</template>
</mydialog>
</div>
</template>
<template>
<div>
<slot name="content" :yes="yes" :no="no"></slot>
</div>
</template>
作用域插槽传递过来的变量,只能在当前template中使用,所以才叫作用域插槽