Vue第五天笔记

一、插槽的使用

1.匿名插槽

父组件传递一个htm1结构给子组件
子组件：<slot>插槽默认内容</slot>
父组件：<子组件>html结构</子组件>

2.具名插槽

父组件传递多个html结构给子组件
子组件：给插槽添加一个name(插槽名)
<slot name="插槽名">插槽默认内容</slot>
父组件：使用v-slot:插槽名 (简写直接#插槽名,就是组件中slot的name名)
<子组件>
<template v-slot:插槽名>html结构</template>
</子组件> 

 3.作用域插槽

子组件传递数据给父组件插槽
(1)子组件：给<slot>内置组件添加自定义属性
<slot属性名="属性值">插槽默认内容</slot>
(2)父组件：使用slot="对象名" 

作用域插槽 子组件给父组件插槽传数据时,在它的底层会自动的声明一个空的Obj对象来接收子组件的slot中的name属性,所以在父组件中需要使用obj.name的形式获取数据

4.具名插槽和作用域插槽并存问题

 (1)具名插槽语法：v-slot:插槽名
(2)作用域插槽：v-slot-"对象名"
问题：两种语法都用到v-slot,而一个标签只能写一个
解决：
v-s1ot:插槽名-“对象名
插槽名”对象名”

 5.ref的使用

1.ref作用：在vue中获取原生DOM对象
2.ref语法：
声明ref:<标签ref="属性名"></标签>
获取ref:this.$refs.属性名(组件标签里的ref指向的是组件的实例对象,可以通过这个调用组件内部的方法)
3.ref注意点：ref用在原生标签和自定义标签（组件）效果不同
ref给标签使用：获取的就是原生DOM
ref给组件使用：获取的就是组件vue实例

**ref的获取可以在mounted(){}回调函数中完成,这里是最早可以获取到DOM元素的钩子函数.**

6.this.$nextTick(()=>{})的使用

Vue更新DoM是一个异步微任务
this.$nextTick()
底层基于Promise,等待当前队列DOM完成更新后执行