cari

Rumah  >  Artikel  >  hujung hadapan web  >  在Vue中如何使用slot实现插槽分发内容

在Vue中如何使用slot实现插槽分发内容

亚连
亚连asal
2018-06-02 10:24:351791semak imbas

这篇文章主要介绍了Vue中的slot使用插槽分发内容的方法，现在分享给大家，也给大家做个参考。

58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee标签，简单来说就是占位符，它会帮你占好位置，等你需要的时候直接将html传入，它会帮你显示出来。

也有人说：props可以将数据从父组件传入子组件，slot可以将html从父组件传入子组件。那么如何实现呢？

单个插槽：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <p id="app">
      <h1>我是父组件的标题</h1>
      <my-component>
        <p>这是一些初始内容</p>
        <p>这是更多的初始内容</p>
      </my-component>
    </p>
    <script type="text/javascript">
      Vue.component(&#39;my-component&#39;, {
       // 有效，因为是在正确的作用域内
       template: &#39;<p>\
              <h2>我是子组件的标题</h2>\
              <slot>只有在没有要分发的内容时才会显示。</slot>\
            </p>&#39;,
       data: function () {
        return {
         
        }
       }
      });
      new Vue({
        el:&#39;#app&#39;,
        data:{
          msg:&#39;你好啊&#39;
        }
      })

    </script>
  </body>
</html>

组件中的模板中写入slot标签，在父级调用子组件的时候传入html即可。

具名插槽：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <p id="app">
      <my-component>
         <h1 slot="header">这里可能是一个页面标题</h1>

         <p>主要内容的一个段落。</p>
         <p>另一个主要段落。</p>

         <p slot="footer">这里有一些联系信息</p>
      </my-component>
    </p>
    <script type="text/javascript">
      Vue.component(&#39;my-component&#39;, {
       // 有效，因为是在正确的作用域内
       template: &#39;<p class="container">\
             <header>\
              <slot name="header"></slot>\
             </header>\
              <main>\
              <slot></slot>\
             </main>\
             <footer>\
              <slot name="footer"></slot>\
             </footer>\
            </p>&#39;,
       data: function () {
        return {
         
        }
       }
      });
      new Vue({
        el:&#39;#app&#39;,
        data:{
          msg:&#39;你好啊&#39;
        }
      })

    </script>
  </body>
</html>

具名插槽，顾名思义当有多个slot标签时，你需要给他们起个自己的名字，在父组件调用时需要slot="内部的对应名字"，当存在没有命名的slot标签时，父级组件传入的默认html代码将全部输出在无名的slot标签中。

作用域插槽

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="vue.min.js"></script>
  </head>
  <body>
    <p id="app">
       <!-- 在父级中，具有特殊特性 slot-scope 的 <template> 元素必须存在，表示它是作用域插槽的模板。slot-scope 的值将被用作一个临时变量名，此变量接收从子组件传递过来的 prop 对象： -->
       <child>
        <template scope="props">
         <span>hello from parent</span><br>
         <span>{{ props.text }}</span>
        </template>
      </child>
    </p>
    <script type="text/javascript">
      // 在子组件中，只需将数据传递到插槽，就像你将 prop 传递给组件一样：
      Vue.component(&#39;child&#39;,{
        template:&#39;<ul>&#39; +
              &#39;<slot text="hello from child"></slot>&#39; +
             &#39;</ul>&#39;,
        data:function(){
         return {

         }
        },
      });
      new Vue({
        el:&#39;#app&#39;,
        data:{
          msg:&#39;你好啊&#39;
        }
      })

    </script>
  </body>
</html>

作用域插槽是一种特殊类型的插槽，用作一个 (能被传递数据的) 可重用模板，来代替已经渲染好的元素。

其实就是相当于，在父组件中可以获取到子组件传递出来的props对象，从而渲染到父组件上。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Bootstrap实现可折叠分组侧边导航菜单

Vue.js+Layer表格数据绑定与实现更新的实例

vue.js 嵌套循环、if判断、动态删除的实例

Atas ialah kandungan terperinci 在Vue中如何使用slot实现插槽分发内容. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：使用ES6时有哪些小技巧Artikel seterusnya：你必须要注意的vue组件使用细节

Artikel berkaitan

Lihat lagi