vue--04 插槽

插槽

1 匿名插槽

• 不使用插槽

• 父页面使用子组件，默认情况下，在子组件开始和结束标签之间添加的内容会忽略展示，仅展示原来子组件内容

# main.js

import demo from './components/demo'
Vue.component('demo', demo);

# pdemo.vue

<template>
  <div>
    <h1>父页面</h1>
    <demo>
      <p>修改子组件内容</p>
    </demo>
  </div>
</template>

<script>
</script>
<style>
</style>

# demo.vue

<template>
  <div>
    <h2>子页面</h2>
  </div>
</template>

<script>
</script>
<style>
</style>

父页面
子页面

• 使用插槽

• 要想展示子组件标签内新添加的内容， 就需要在子组件添加插槽，此时新添加的内容展示顺序按照插槽位置

# demo.vue

<template>
  <div>
    <h2>子页面</h2>
    <slot></slot>
  </div>
</template>

<script>
</script>
<style>
</style>

父页面
子页面
修改子组件内容

• 插槽默认内容

• 插槽可设置默认内容。父组件调用子组件时标签内不添加内容则展示默认内容，添加内容则展示新添加的内容

# demo.vue

<template>
  <div>
    <h2>子页面</h2>
    <slot><p>插槽使用时默认添加的内容</p></slot>
  </div>
</template>

2 命名插槽

• 当子组件内有多处需要替换时，可以使用命名插槽指定位置进行替换

# demo.vue

<template>
  <div>
    <h2>子页面</h2>
    <!-- 匿名插槽 -->
    <slot><p>插槽使用时默认添加的内容</p></slot>

    <!-- 命名插槽1 -->
    <slot name='slot01'></slot>
    <!-- 命名插槽2 -->
    <slot name='slot02'></slot>
  </div>

</template>

# pdemo.vue

<template>
  <div>
    <h1>父页面</h1>
    <demo>
      <p>修改子组件内容</p>

      <p slot='slot01'>vue2.6之前版本用法,兼容</p>

      <template v-slot:slot01>vue2.6之后版本用法<br/></template>
      
      <template #slot02>vue2.6之后版本用法，简写</template>

    </demo>
  </div>
</template>

父页面
子页面
修改子组件内容
vue2.6之后版本用法
vue2.6之后版本用法，简写

3 插槽作用域

• 父组件需要获取子组件数据时，要用到插槽作用域

# demo.vue
<template>
  <div>
    <slot name='slot01' :user='username'></slot>
    <slot name='slot02' :age='age'></slot>
    <slot name='slot03' :add='addr'></slot>
  </div>

</template>

<script>
export default{
  data(){
    return{
      age: '18',
      username: 'zhangsan',
      addr: 'wuahn',
    }
  } 
}
</script>

<style>
</style>

# pdemo.vue

<template>
  <div>
    <demo>
      <!-- vue2.6之前版本用法 -->
      <p slot="slot01" slot-scope="scop">{{ scop.user }}</p>
     
      <!-- vue2.6之前版本用法 -->      
      <template #slot02='sope'>
        <p>{{ sope.age }}</p>
      </template>

      <template #slot03='addr'>
        <p>{{ addr }}</p>
      </template>

    </demo>
  </div>
</template>

zhangsan
18
{ “addr”: “wuahn” }