Vue 插槽

插槽的第一种方法

<template>
  <div id="contentinfo">
    <!--组件里面的插槽
    1引入子组件 
    2子组件中间写的内容 可以是文本 也可以是html内容 当作插槽使用
    -->
    <v-userlist>
      <!--插槽的内容-->
      <div class="user">
        <table>
          <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>地址</td>
          </tr>
          <tr v-for="(item,index) in list" :key="index">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>{{item.add}}</td>
          </tr>
        </table>
      </div>
    </v-userlist>
  </div>
</template>
<script>
import userList from "../component/child/list";
export default {
  name: "contentinfo",
  components: {
    "v-userlist": userList
  },
  data() {
    return {
      list: [
        {
          id: 1,
          name: "毛豆1",
          age: 20,
          add: "西安市"
        },
        {
          id: 2,
          name: "毛豆2",
          age: 20,
          add: "西安市"
        },
        {
          id: 3,
          name: "毛豆3",
          age: 20,
          add: "西安市"
        }
      ]
    };
  }
};
</script>

<template>
  <div id="userlist">
      我是用户的一个列表组件
      <slot></slot>
  </div>
</template>
<script>
export default {
    name:"userlist"
}
</script>
<style>
</style>

插槽的第二种写法

<template>
  <div id="contentinfo">
    <!--    
    在子组件标签之内 不写内容 默认插槽没有值
    -->
    <v-userlist>
      <!--下面的子组件没有给插槽的内容 进行默认的插槽数据-->
    </v-userlist>
  </div>
</template>

这种插槽是无名插槽

<template>
  <div id="userlist">
      我是用户的一个列表组件
      <!--在该组件没有给插槽内容可以在组件内部slot中写默认的内容-->
      <slot>
          默认的插槽数据
      </slot>
  </div>
</template>
<script>
export default {
    name:"userlist"
}
</script>
<style>
</style>

具名插槽

<template>
  <div id="contentinfo">
    <!--具名插槽 选用template模板的v-solt指令绑定到指定的插槽-->
    <template v-solt="header">
      <h1>12345</h1>
    </template>
    <template v-solt="content">
      <h1>12345</h1>
    </template>
    <template v-solt="footer">
      <h1>12345</h1>
    </template>
  </div>
</template>
<script>
import userList from "../component/child/list";
export default {
  name: "contentinfo",
  components: {
    "v-userlist": userList
  }
};
</script>

<template>
  <div id="userlist">
      我是用户的一个列表组件
      <!--具名插槽-->
      <solt name="header"></solt>
      <solt name="content"></solt>
      <solt name="footer"></solt>
  </div>
</template>
<script>
export default {
    name:"userlist"
}
</script>