vue slot插槽的使用方法

时间 2019-11-17

标签 vue slot 插槽使用方法繁體版

原文原文链接

官方文档其实已经讲得很详细，我根据文档，把官方的小案例实现了一下，这样更直观html

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://unpkg.com/vue@2.3.3/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <div>
      <!-- 单slot -->
      <v-one>
        <!-- 这里的全部内容会替换掉slot -->
        <p>初始化段落一</p>
        <p>初始化段落二</p>
      </v-one>
      <!-- 渲染结果 -->
      <!-- <div>
        <h1>组件标题</h1>
        <p>初始化段落一</p>
        <p>初始化段落二</p>
        <p>组件段落内容</p>
        <p>I am one</p>
      </div> -->


      <!-- 具名slot -->
      <v-two>
        <p slot="nav">我是导航</p>
        <p slot="main">我是内容</p>
        <p slot="footer">我是底部</p>
      </v-two>
      <!-- 渲染结果 -->
      <!-- <div>
        <nav>
          <p>我是导航</p>
        </nav>
        <main>
          <p>我是内容</p>
        </main>
        <footer>
          <p>我是底部</p>
        </footer>
      </div> -->


      <!-- 做用域插槽 -->
      <v-three>
      <!-- 父组件默认没法使用子组件数据 -->
          <template scope="props">
              <p>{{props.text}}</p>
          </template>
      </v-three>

      <!-- 渲染结果 -->
      <!-- <div><p>I am three</p></div> -->
    </div>
  </div>


  <template id="one">
    <div>
      <h1>组件标题</h1>
      <slot></slot>
      <p>组件段落内容</p>
      <p>{{one}}</p>
    </div>
  </template>


  <!-- 具名slot -->
  <template id="two">
    <div>
      <nav>
        <slot name="nav"></slot>
      </nav>
      <main>
        <slot name="main"></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  </template>

<!-- 做用域插槽 -->
  <template id="three">
    <div>
        <!-- 把数据传递给slot,这样父组件也能够访问three这个组件的数据 -->
      <slot :text="three"></slot>
    </div>
  </template>
  <script>
  new Vue({
    el: '#app',
    components: {
      'v-one': {
        template: '#one',
        data() {
          return {
            'one': 'I am one'
          }
        }
      },
      'v-two': {
        template: '#two',
        data() {
          return {
            'two': 'I am two'
          }
        }
      },
      'v-three': {
        template: '#three',
        data() {
          return {
            'three': 'I am three'
          }
        }
      }
    }
  });
  </script>
</body>

</html>

单个slot使用最简单，也是最经常使用的，当咱们定义了一个子组件，父组件在使用的这个组件的时候，想在内部自定义一些初始化数据，这时候就能够用slot实现。vue

具名slot只是给slot加了name属性，在使用的时候能够引入多个。浏览器

做用域slot就比较强大了，咱们知道子组件的数据，在父组件中是没法使用的，可是经过官方提供的扩展，能够轻松实现这一点。app

渲染后效果图，能够直接复制代码本身在浏览器运行查看效果spa