插槽

单个插槽

主页面：

<template>
  <div class="home">
    主页面
    <ADD>
      <p>我是擦插入到A页面的元素</p>
      <p>插入到A页面的元素</p>
    </ADD>
  </div>
</template>

<script>
import ADD from '@/components/A'
export default {
  name: 'home',
  data() {
    return {}
  },
  components: {
    ADD
  }
}
</script>

子页面：

<template>
    <div class="A">
      A页面
      <slot></slot>
    </div>
</template>

<script>
export default {
  name: 'A'
}
</script>

单个插槽

首页给子页面加上slot，到主页面进入子页面，并在主页的子组件添加内容

具名插槽

主页面：

<template>
  <div class="home">
    主页面
    <ADD>
      <template v-slot:AAA>
        <h1>我叫AAA</h1>
      </template>
      <template v-slot:BBB>
        <h1>我叫BBB</h1>
      </template>
    </ADD>
  </div>
</template>

<script>
import ADD from '@/components/A'
export default {
  name: 'home',
  data() {
    return {}
  },
  components: {
    ADD
  }
}
</script>

子页面：

<template>
    <div class="A">
      <b>子页面</b>
      <slot name="AAA"></slot>
      <slot name="BBB"></slot>
    </div>
</template>

<script>
export default {
  name: 'A'
}
</script>

具名插槽

就是给插槽起个名字，这样子组件就可以同时有多个插槽
在子组件中给每个slot插槽有一个属性name
然后在父组件中用template标签配合v-slot属性来接收响应

作用域插槽(就是子传父传的数据)

主页面：

<template>
  <div class="home">
    主页面
    <ADD>
      <template v-slot:AAA="{dataMsg}">
        <h1>我叫AAA</h1>
        <p>{{dataMsg}}</p>
      </template>
      <template v-slot:BBB="{dataMessage}">
        <h1>我叫BBB</h1>
        <p>{{dataMessage}}</p>
      </template>
    </ADD>
  </div>
</template>

<script>
import ADD from '@/components/A'
export default {
  name: 'home',
  data() {
    return {}
  },
  components: {
    ADD
  }
}
</script>

子页面：

<template>
    <div class="A">
      <b>子页面</b>
      <slot name="AAA" :dataMsg="msg"></slot>
      <slot name="BBB" :dataMessage="message"></slot>
    </div>
</template>

<script>
export default {
  name: 'A',
  data() {
    return {
      msg: '子组件传父组件数据1',
      message: '子组件传父组件数据2'
    }
  }
}
</script>

数据插槽

在父组件中在某个标签上通过{}来接收，{{ }}来渲染（未定义的插槽就用v-slot:defaultc和 v-slot:other）指令来接收