slot插槽的使用

1、插槽

组件的插槽是为了让封装的组件更具有拓展性，开发的时候可以自定义组件在不同地方的内容。

2、基本使用

<div id="app">
  <test><h2>变化1</h2></test>
  <test><h2>变化2</h2></test>
  <test><h2>变化3</h2></test>
</div>

<template id="test">
  <div>
    <h2>固定内容</h2>
    <slot>
      <h2>可变内容</h2>  //默认显示
    </slot>
  </div>
</template>

3、具名插槽的使用

<div id="app">
  <test>
    <template v-slot:header>
      <h2>页头</h2>
    </template>
    
    <template>
      <h2>主要内容</h2>
    </template>
    
    <template v-slot:footer>
      <h2>页脚</h2>
    </template>
  </test>
</div>

<template>
  <div id="test">
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

4、作用域插槽的使用

子组件的数据可以被父组件拿到

<template>
  <div id="my-test">
    <slot name="slotscope" :user="user" :text="text"></slot>
  </div>
</template>

<script>
export default {
  name: "mytest",
  data() {
    return {
      user: [
        {
          name: "哈哈哈",
          age: "12",
        },
        {
          name: "咩咩咩",
          age: "11",
        },
      ],
      text: {
        msg: "作用域插槽",
      },
    };
  },
};
</script>

<template>
 <div id="app">
   <mytest>
     <template v-slot:slotscope="item">
       <h1>{{ item.text.msg }}</h1>
       <div v-for="user in item.user" :key="user">
         <h3>{{ user.name }}</h3>
       </div>
     </template>
   </mytest>
 </div>
</template>

<script>
import mytest from "./components/test.vue";

export default {
 name: "App",
 components: {
   mytest,
 },
 data() {
   return {};
 },
};
</script>