slot用法

slot的作用：

在子组件内使用特殊的<slot>元素就可以为这个子组件开启一个slot（插槽），在父组件模板里，插入在子组件标签内的所有内容将替代子组件的＜slot> 标签及它的内容

就是在子组件内部用 <slot></slot>标签占位，当在父组件中使用子组件的时候，我们可以在子组件中插入内容，而这些插入的内容则会替换 <slot></slot>标签的位置

1. 单个slot的默认用法

父组件：

<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <div class="tmpl">
              <span>菜单1</span>
              <span>菜单2</span>
            </div>
        </child>
    </div>
</template>
<script>
import Child from './a'
export default {
  components: {
    child: Child
  }
}
</script>

子组件

<template>
  <div>
    <input type="text" @change="handleClick" />
    <p>输入值：{{ currentData }}</p>
    <slot name="first"></slot>
    <slot>父组件中没有插入内容，我就是默认内容</slot>
    <slot></slot>
    <slot name="last"></slot>
  </div>
</template>
<script>
export default {
  name: "Child",
  data() {
    return {
      currentData: "",
    };
  },
  methods: {
    handleClick(e) {
      this.currentData = e.target.value;
      console.log(this.currentData);
    },
  },
};
</script>

image.png

2. 具名slot

父组件

<template>
  <div class="hello">
    <MyComponents>
      <!-- 这个p会替换子组件中的name属性为first的slot标签 -->
      <p slot="first">匹配第一个插槽的内容</p>
      <!-- 这个p会替换子组件中的没有name属性的slot标签，有几个替换几个 -->
      <p>我插入了内容</p>
      <!-- 这个p会替换子组件中name属性为last的slot标签 -->
      <p slot="last">匹配最后一个插槽</p>
    </MyComponents>
  </div>
</template>

子组件

<template>
  <div>
    <button @click="handleClick">+1</button>
    <slot name="first"></slot>
    <slot>父组件中没有插入内容，我就是默认内容</slot>
    <slot></slot>
    <slot name="last"></slot>
  </div>
</template>

v-slot(vue2.6新增)

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的

匿名插槽

父组件中

<Son>
    <template>
        <div>
            匿名插槽
        </div>
    </template>
</Son>

子组件中

<template>
    <div>
        <slot></slot>
    </div>
</template>

具名插槽与动态命名

  <Son>
  <!-- default: 如不写则默认default -->
      <template v-slot:default>
          <div>
              匿名插槽
          </div>
      </template>
      <template v-slot:a>
          <div>
              具名插槽-a
          </div>
      </template>
      <!-- 具名插槽的缩写 ： # -->
       <template #f>
                <div>
                    具名插槽-f
                </div>
            </template>
      <!-- slotName: 'b' -->
      <template v-slot:b="{slotName}">
          <div>
              动态命名插槽-b
          </div>
      </template>
  </Son>

子组件

<div>
<!-- 当没有指定名字的时候则使用默认 -->
    <slot></slot>
    <slot name="a"></slot>
    <slot name="b"></slot>
</div>

作用域插值

可以使父组件插入子组件的元素访问到子组件的数据
类似子向父传参

父组件

<template v-slot:[slotName1]="slotProps">
    {{slotProps.user.name}}
</template>

子组件

<slot name="c" :user="user"></slot>

export default {
    name: 'Son',
    data() {
        return {
            user: {
                name: '子组件中的username'
            }
        }
    }
}