插槽

插槽 的作用是 可以控制 页面 的组成 也就是外卖可以通过 插槽 来显示页面的不同 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 20</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script>
  // slot 插槽
  // slot 中使用的数据，作用域的问题
  // 父模版里调用的数据属性，使用的都是父模版里的数据
  // 子模版里调用的数据属性，使用的都是子模版里的数据
  // 具名插槽
  const app = Vue.createApp({
    template: `
      <layout>
        <template v-slot:header>
          <div>header</div>
        </template>
        <template v-slot:footer>
          <div>footer</div>
        </template>
      </layout>
    `
  });

  app.component('layout', {
    template: `
      <div>
        <slot name="header">
          1111111111111
        </slot>
        <div>content</div>
        <slot name="footer"></slot>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>
</html>

当我们 在   slot name="header" 命名 name  的 时候  我们这个 部分就会被 插槽 的内容所替换  如下 

 

 当不命名的时候  不被替换  slot  为 div  div  下如果有显示 就显示 div 下的内容 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>lesson 20</title>
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>
<script>
  // slot 插槽
  // slot 中使用的数据，作用域的问题
  // 父模版里调用的数据属性，使用的都是父模版里的数据
  // 子模版里调用的数据属性，使用的都是子模版里的数据
  // 具名插槽
  const app = Vue.createApp({
    template: `
      <layout>
        <template v-slot:header>
          <div>header</div>
        </template>
        <template v-slot:footer>
          <div>footer</div>
        </template>
      </layout>
    `
  });

  app.component('layout', {
    template: `
      <div>
        <slot>
          1111111111111
        </slot>
        <div>content</div>
        <slot name="footer"></slot>
      </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

显示 ：

 

posted @ 2021-01-28 09:35  1点  阅读(75)  评论(0)  编辑  收藏  举报