slot---組件內容分發

時間  2019-11-09
標籤 slot 組件 內容 分發 简体版
原文   原文鏈接 
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>單插槽(Single-Slot)</title>
</head>
<body>
    <div id="example">
        <parent-com></parent-com>
    </div>
    <template id='parent-com'>
      <div>
              <h1>I'm the parent title</h1>
              <child-com>
               <p>
                我是在父組件的內容，寫在子組件的標籤內，將會自動傳入子組件模板中的slot
                </p>
             </child-com>
        </div>
    </template>
    <template id='child-com'>
        <div>
          <h2>I'm the child title</h2>
          <slot>
            沒有slot注入時，這段文字纔會被顯示。
          </slot>
        </div>
    </template>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
    Vue.component('parent-com', {
      template: '#parent-com'
    });
    Vue.component('child-com', {
      template: '#child-com'
    });
    new Vue({
      el: '#example'
    });

    //寫parent-com的時候，寫到了<child-com></child-com>，原本child-com標籤之間是不該該寫內容的，由於內容是內部模板渲染出來的。可是若是你寫了，這些html內容將會當作參數傳入child-com內部定義有slot的地方。
</script>
</html> -->



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>命名插槽</title>
</head>
<body>
    <div id="example">
      <parent-com></parent-com>
    </div>
    <template id='parent-com'>
        <div>
          <h1>I'm the parent title</h1>
          <child-com>
                <h1 slot="header">Here might be a page title</h1>
                <p>A paragraph for the main content.</p>
                <p>And another one.</p>
                <p slot="footer">Here's some contact info</p>
          </child-com>
        </div>
    </template>

    <template id="child-com">
        <div class="container">
            <header>
                <slot></slot>
            </header>
            <main>
                <slot></slot>
            </main>
            <footer>
                <slot  name="footer"></slot>
            </footer>
        </div>
    </template>
</body>
<script type="text/javascript" src="js/Vue.js"></script>
<script type="text/javascript">
    Vue.component('parent-com', {
      template: '#parent-com'
     });
     
     Vue.component('child-com', {
      template: '#child-com'
     });

    new Vue({
      el: '#example'
    });
</script>
</html>



二次視頻學習：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot內置組件</title>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
</head>
<body>
    <div id="app">
        <caicai>
            <span slot="url">{{caiData.url}}</span>  <!--  在組件標籤裏傳遞值-->
            <span slot="netName">{{caiData.netName}}</span>
            <span slot="skill">{{caiData.skill}}</span>
        </caicai>
    </div>
    <template id="tep">
        <div>
            <p>地址：<slot name="url"></slot></p> <!--在模版裏  用slot 標籤接收值-->
            <p>網名：<slot name="netName"></slot></p>
            <p>技術類型：<slot name="skill"></slot></p>
        </div>
        
    </template>
</body>
<script type="text/javascript">
    var jinsuo={  //組件模版變量
        template:"#tep"  //模版  定義在 id爲tep 的html的tempalte標籤裏 
    }
    var app=new Vue({
            el:"#app",
            data:{
                caiData:{  //  數據對象
                    url:"http://baidu.com",
                    netName:"菜菜",
                    skill:"web前端"
                }
            },
            components:{  //組件
                "caicai":jinsuo  //caicai  組件名  jinsuo  是組件模版
            }
        })
</script>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程