一.插槽
作用:
让组件更加灵活, 组件内的标签可以由父组件来决定
提高组件复用性。
默认插槽:
在组件中使用slot标签占位
使用组件的时候将自定义标签传入组件内
设置默认值:
在其slot标签中写的内容就是默认值
具名插槽:
组件有多处不确定的内容时可以通过具名插槽来区分
用法:在lost标签设置name属性, 使用组件时使用 template 结合 v-slot:插槽名 来指定对应的插槽
<template #title>
<h3>plmm</h3>
</template>
<slot name="title">
<h1>我是默认标题</h1>
</slot>
v-slot: 可以简写为 #
作用域插槽:
子组件往插件上绑定数据,父组件使用时可以接收
用法:在lost标签使用v-bind绑定数据,使用组件的时候在template标签上使用v-slot“变量名”来接受传递过来的数据
<!-- v-slot 必须写在 template 上 -->
<!-- v-slot 用来接收传递过来的数据 row -->
<!-- <template v-slot="变量名"> -->
<!-- scope: { row: objm, ...其他绑定的数据 } -->
<template v-slot="scope">
<h3>{{ scope.row.msg }}</h3>
<p>寒雨连江夜入吴,</p>
<p>平明送客楚山孤。</p>
<p>洛阳亲友如相问,</p>
<p>一片冰心在玉壶。</p>
</template>
<slot :row="obj">
<h1>我是默认内容</h1>
</slot>
data() {
return {
isShow: true,
obj: {
msg: '你好世界'
}
}
},
二.自定义指令
其作用当内置指令无法满足时可以自己定义。
用法:1.注册
<template>
<div>
<h1>自定义指令</h1>
<input v-focus id="inp" type="text">
</div>
</template>
directives: {
// 指令名: 配置对象
// 配置对象中写一个 inserted 钩子函数
focus: {
// inserted: 当指令绑定的元素被插入到 DOM 树上时执行
// el: 当前指令绑定的元素对象 (原生 DOM)
inserted(el) {
// console.log(el)
el.focus()
}
}
},
使用的时候在标签上v-指令名
三.组件进阶
$refs作用获取dom元素和组件对象
用法:在标签上设置ref属性,使用this.$refs.ref属性名
$nextTick:作用就是等待下一次dom更新完毕后执行代码
用法:this.$nextTick(() => {
// 做 DOM 更新后的事情
})
v-model的本质上是一个语法糖,做了两件事1.给组件使用v-bind绑定value属性,设置一个变量2.给组件绑定一个input事件,事件触发的时候将最新的数据赋值给变量