vue插槽 - slot

TodoList.vue

<template>
  <slot :arg1="str+1" :arg2="str+2"></slot>
  <slot name="test" :arg1="str+11" :arg2="str+22"></slot>
</template>

<script>
export default {
  name: "todo-list",
  data() {
    return {
      str: "江上清风游"
    }
  },
}
</script>

App.vue

<template>
  <TodoList>
    <template #[dynamicArg]="{arg1:arg}">
      <h1>{{ arg }}</h1>
    </template>
  </TodoList>
  <button @click="dynamicArg='default'">切换到默认插槽</button>
  <button @click="dynamicArg='test'">切换到具名插槽</button>
</template>

<script>
import TodoList from "@/components/TodoList";

export default {
  name: 'App',
  data() {
    return {
      dynamicArg: 'default'
    }
  }, components: {
    TodoList
  }
}
</script>

默认插槽.png
具名插槽.png

1. slot标签内未声明name 则该slot默认插槽name值为"default"

//当slot插槽为default
dynamicArg = 'default';
//slot标签内声明的各项属性则会被包装到一个obj对象内
const obj = {arg1 : "江上清风游1", arg2 : "江上清风游2"};
//当slot插槽为test
dynamicArg = 'test';
const obj = {arg1 : "江上清风游11", arg2 : "江上清风游22"};

3.{arg1:arg} 将上述包装后的obj对象中的arg1参数名重命名为arg
4.#[dynamicArg]是v-slot[dynamicArg]的缩写
5.[dynamicArg]是动态赋值插槽名写法 其中dynamicArg是动态插槽属性名