vue slot插槽的使用方法

Posted 2021-01-24 lst619247

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue slot插槽的使用方法相关的知识，希望对你有一定的参考价值。

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://unpkg.com/[email protected]/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实现。

具名slot只是给slot加了name属性，在使用的时候可以引入多个。

作用域slot就比较强大了，我们知道子组件的数据，在父组件中是无法使用的，但是通过官方提供的扩展，可以轻松实现这一点。

渲染后效果图，可以直接复制代码自己在浏览器运行查看效果

技术分享图片

以上是关于vue slot插槽的使用方法的主要内容，如果未能解决你的问题，请参考以下文章