vue.js 插槽-默认插槽

在Vue.js中，插槽（Slot）是一种可以让父组件向子组件传递内容的机制。插槽允许你在子组件中定义一些容器，然后在父组件中填充内容。Vue.js中的插槽分为默认插槽（Default Slot）和具名插槽（Named Slot）两种。

默认插槽是在子组件中没有具名插槽的情况下，父组件传递的内容会被放在默认插槽中。默认插槽不需要通过名字指定，可以直接使用。下面是详细解析和代码示例。

在子组件中，通过使用<slot></slot>标签可以定义默认插槽。例如，我们有一个子组件ChildComponent，它的模板中包含一个默认插槽：

<template>
  <div>
    <h2>子组件</h2>
    <slot></slot>
  </div>
</template>

在父组件中，可以将内容放在子组件的默认插槽中。通过在子组件的标签内添加内容，这些内容将被放置在子组件的默认插槽中。例如：

<template>
  <div>
    <h1>父组件</h1>
    <ChildComponent>
      <p>这是插入子组件的内容</p>
    </ChildComponent>
  </div>
</template>

在上面的例子中，<p>这是插入子组件的内容</p>被放置在ChildComponent的默认插槽中。

可以通过子组件的$slots属性访问到插槽的内容。默认插槽会放在$slots.default属性中，可以在子组件的脚本中访问它。例如，我们可以在ChildComponent的脚本中打印插槽的内容：

<script>
export default {
  mounted() {
    console.log(this.$slots.default)
  }
}
</script>

当子组件被挂载时，控制台会输出[VNode]数组，里面包含了插入的内容。

总结一下，默认插槽是一种不需要通过名字指定的插槽，父组件传递的内容会被放在默认插槽中。可以通过<slot></slot>标签在子组件中定义默认插槽，并通过子组件的$slot.default属性访问插槽的内容。