집 > 기사 > 웹 프론트엔드 > 슬롯을 사용하여 Vue의 슬롯을 통해 콘텐츠를 배포하는 방법

슬롯을 사용하여 Vue의 슬롯을 통해 콘텐츠를 배포하는 방법

亚连원래의: 2018-06-02 10:24:351791검색

이 글에서는 주로 Vue에서 컨텐츠를 배포하기 위해 슬롯을 사용하는 방법을 소개하고 참고용으로 올려드립니다.

58cb293b8600657fad49ec2c8d37b4727971cf77a46923278913ee247bc958ee 태그는 위치를 차지하는 데 도움이 됩니다. 필요할 때 HTML을 직접 전달하면 표시됩니다.

어떤 사람들은 props가 상위 구성 요소에서 하위 구성 요소로 데이터를 전달할 수 있고 슬롯이 상위 구성 요소에서 하위 구성 요소로 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>

구성 요소의 템플릿에 슬롯 태그를 작성하고 상위 구성 요소가 하위 구성 요소를 호출할 때 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>

이름이 지정된 슬롯은 이름에서 알 수 있듯이 여러 슬롯 태그가 있는 경우 상위 구성 요소를 호출할 때 슬롯="내부 해당 이름"이 필요합니다. 이름이 지정되지 않은 슬롯 태그가 있는 경우 상위 구성요소에서 전달된 기본 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">
       <!-- 在父级中，具有特殊特性 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 객체를 가져와 상위 구성 요소에 렌더링하는 것과 같습니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

슬롯을 사용하여 Vue의 슬롯을 통해 콘텐츠를 배포하는 방법

관련 기사