vue2 - 插槽solt，默认插槽，具体名插槽，作用域插槽

1.默认插槽

作用：会把父组件human中的内容全部解析到子组件中的slot中

父组件：

<template>
  <div id="App">
    <!--子组件-->
    <human>
      <!--解析到子组件中的内容-->
      <h2>USER</h2>
      <h2>NAME</h2>
    </human>
  </div>
</template>

<script>
import human from "./components/human"

export default {
  name: 'App',
  components: {
    human,
  }
}
</script>

子组件：

<template>
  <div>
    <h4>HUMAN</h4>
    <!--这是一个插槽 获取父组件穿过来的内容-->
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'Human',
}
</script>

 

2.具名插槽

根据插槽的名称放入指定的插槽内

父组件：

<template>
  <div id="App">
    <human>
      <!--根据插槽的名称放入指定的插槽内-->
      <h2 slot="bottom">USER</h2>
      <h2 slot="top">NAME</h2>
    </human>
  </div>
</template>

子组件：

<template>
  <div>
    <h4>HUMAN</h4>
    <!--这是一个插槽并且给插槽设置名称-->
    <slot name="top"></slot>
    <slot name="bottom"></slot>
  </div>
</template>

 

3.作用域插槽

子组件给父组件分享数据

<template>
  <div id="App">
    <human>
      <!--获取子组件传过来的数据-->
      <template scope="value">
        <h1>{{value.username}}</h1>
      </template>
    </human>
  </div>
</template>

<script>
import human from "./components/human"

export default {
  name: 'App',
  components: {
    human,
  }
}
</script>

子组件：

<template>
  <div>
    <h4>HUMAN</h4>
    <!--插槽给父组件分享数据-->
    <slot :username="username"></slot>
  </div>
</template>

<script>
  export default {
    name: 'Human',
    data(){
      return {
        username: 'levi',
        password: 123
      }
    }
  }
</script>