“我正在参加「掘金·启航计划」”

1.插槽slot使用

* 插槽作用： 将父组件的结构传递结构给子组件
* <slot> 元素是一个插槽出口 (slot outlet)，标示了父元素提供的插槽内容 (slot content) 将在哪里被渲染
  - 第一步：在`子`组件中定义一个插槽 <slot>默认值：如果父组件没有传递则默认显示</slot>`
  - 在父组件中传递结构: <子组件>父组件需要传递的结构</子组件>

// 基本的父传子
// 父组件
<FancyButton> // 组件名
  Click me! <!-- 插槽内容 -->
</FancyButton>
// 子组件
<button class="fancy-btn">
<slot></slot> <!-- 插槽出口 --> 
</button>

1.2 具名插槽

具名插槽作用： 父组件 传递多个html结构 给子组件,给不同slot分发不同内容

具名插槽语法如下:

给子组件的添加name属性： name="插槽名"
父组件使用v-slot:插槽名 : 给指定的插槽传递结构
注意：这个v-slot指令必须要写在<template>标签中,否则会报错

`<template>`是HTML5新增的一个语义化标签，模板的意思。 这个标签本身不会被渲染，因此最终在页面是看不见的。 这个标签类似于div,就是一个空盒子容器。 与div唯一的区别就是它不会渲染。

v-slot指令可以简写成 #
默认情况下,如果子组件内部有多个slot 则父组件传递的html结构会替换所有的slot插槽,插入v-slot内容写在templaye标签中,子组件使用name来达到自己想给哪一个插槽替换不同的结构

1.3 作用域插槽

- 父组件 给 子组件 传递插槽 时，可以使用子组件内部的数据
- <template v-slot="对象名"></slot>
1.插槽与props的异同点

相同点：都是父传子

不同点：

props: 传递的是数据

插槽：传递的是html结构

2.作用域插槽和$emit异同点

相同点：都是子传父

不同点：

$emit : 子传父的数据通过事件来接收

作用域插槽：子传父的数据是通过插槽v-slot接收（子传父的数据，只能给插槽用）

作用域插槽语法如下

1.给子组件的添加一个自定义属性 : <slot :属性名="属性值" ></slot>

2.给父组件的template添加v-slot属性接收数据: <template v-slot="对象名"></template>

父组件使用子组件内部数据语法： 对象名.属性名

2-vue自定义指令

局部注册：只能在当前组件使用
全局注册： 在main.js中注册，任何地方可用

    // 用法基本一致 都是在行内加 v-自定义指令名
   // 全局指令 - 到处"直接"使用
Vue.directive("focus", {
  inserted(el) {
    el.focus() // 触发标签的事件方法
  }
})

3-$ref使用（获取DOM对象或组件对象）

1.添加的的时候是: ref

2.获取的时候是: $refs

1.1 ref用于标签

ref作用：在vue中操作dom元素
vue不推荐我们直接操作dom。如果真的要在vue中操作dom,可以使用ref语法

给标签添加自定义属性red :<button ref="属性名"></button>

vue会自动把页面所有的ref属性，挂载到vue实例的$ref对象中

通过 vm.$refs.属性名 获取该标签

一定要注意 : vue在mounted勾子中完成页面真实DOM渲染，所以最早能获取dom的就是mounted钩子

1.2 ref用于组件

`ref`设置给不同的标签，获取到的东西是不同的。
1.如果设置给`dom元素(html标签)`，则获取的是`dom元素对象`
2.如果设置给`组件(组件也是一个标签)`，则获取的是`组件vue实例对象`

总结 :

1 通过使用插槽，`<FancyButton>` 组件更加灵活和具有可复用性。现在组件可以用在不同的地方渲染各异的内容，但同时还保证都具有相同的样式。
2.父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域
3.组件能够接收任意类型的 JavaScript 值作为 props，但组件要接收模板内容需要使用$ref 来获取DOM对象或组件对象
4.作用域插槽和具名插槽非常相似,并且不能同时使用v-slot命令 在一个标签中同时使用 可以直接简写为 #子组件name值="对象名" 来指定替换和接收子组件的内容和数据

Vue插槽的基本用法