master

分支 (1)

管理

管理

master

vue-courseware
/
30-slot插槽.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/vue.js"></script>
    <style>
      img {
        width: 50px;
      }
      .box {
        width: 300px;
        border: #abbeff 1px solid;
      }
    </style>
  </head>

  <body>
    <!-- 插槽，允许父组件传递自定义的html结构给子组件。 -->
    <div id="app">
      <my-slot></my-slot>
      <my-slot>
        <i>我是新的内容</i>
      </my-slot>
      <my-slot>
        <i>我是新的内容1</i>
        <i>我是新的内容2</i>
        <i>我是新的内容3</i>
        <i>我是新的内容4</i>
      </my-slot>
      <!-- 插槽，如果没有slot属性，则匹配默认插槽（匿名插槽） -->
      <!-- 插槽，如果有slot属性，但是匹配不到组件的插槽，则不显示 -->
      <my-slot>
        <b>我是新插槽</b>
        <img slot="img" src="./img/on.png" alt="" />
        <img slot="img1" src="./img/off.png" alt="" />
      </my-slot>

      <my-slot>
        <img src="./img/boy.jpg" alt="" slot="img" />
        <h5>098765</h5>
        <b slot="img">12345</b>
      </my-slot>

      <!-- 多个标签匹配同一个插槽 -->
      <my-slot>
        <!-- <h1 slot="h1">gdvsavds</h1>
        <h1 slot="h1">gdvsavds</h1>
        <h1 slot="h1">gdvsavds</h1>
        <h1 slot="h1">gdvsavds</h1>
        <h1 slot="h1">gdvsavds</h1>
        <h1 slot="h1">gdvsavds</h1>
        <h1 slot="h1">gdvsavds</h1>
        <h1 slot="h1">gdvsavds</h1> -->

        <!-- 使用template组件，将所有同一个插槽的元素包裹起来 -->
        <template slot="h1">
          <h1>gdvsavds</h1>
          <h1>gdvsavds</h1>
          <h1>gdvsavds</h1>
          <h1>gdvsavds</h1>
          <h1>gdvsavds</h1>
          <h1>gdvsavds</h1>
          <h1>gdvsavds</h1>
        </template>
      </my-slot>
    </div>
  </body>
  <script>
    Vue.component("my-slot", {
      template: `<div class="box">
        <h1>我是box组件</h1>
        <slot><h3>我是默认的内容</h3></slot>
        <slot name="h1"></slot>
        <slot name="img">
          <img src="./img/an1.jpg"/>
        </slot>
      </div>`,
    });
    new Vue({
      el: "#app",
      data: {},
      methods: {},
      computed: {},
      mounted() {},
      watch: {},
    });
  </script>
</html>