Vue插槽

一.插槽

作用：

让组件更加灵活, 组件内的标签可以由父组件来决定

提高组件复用性。

默认插槽：

在组件中使用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事件，事件触发的时候将最新的数据赋值给变量