vue - 插槽slot

默认插槽：

会把父组件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>

<style></style>

子组件

<template>
  <div>
    <h4>HUMAN</h4>
    <!--这是一个插槽-->
    <slot></slot>
  </div>
</template>

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

<style></style>

 

具名插槽：

父组件

<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>

 

作用域插槽：

子组件给父组件分享数据

父组件

<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>

<style></style>

子组件

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

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

<style></style>