鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ vue多層嵌套的問題

vue多層嵌套的問題

為什么child顯示不出來，只顯示出來了home跟parent

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body >
        <div id="home" >
            <div>{{home}}</div>
            <parent>
                <child></child>
            </parent>
        </div>
        <template id="parent">
          <p>{{Member_Type}}</p>
        </template>
        <template id="child">
          <p>{{Company_Na}}</p>
        </template>
    </body>
<script type="text/javascript">
$(function(){
        var lan={
            "home":"首頁"
        }
        var applyData={
            Member_Type: '11',        
            Company_Na: '22'            
        };
        Vue.component('parent',{
      template:'#parent',
        data: function(){  //子組件data只能是function
                return applyData
          },
        });
    Vue.component('child',{
      template:'#child',
      data: function(){  //子組件data只能是function
                return applyData
          },
    });
        var home = new Vue({
          el: '#home',
          data: lan,
        });
});
</script>    
</html>

clipboard.png

html改成

clipboard.png

才可以

或者寫成這樣，才能顯示

    <body >
        <div id="home" >
            <div>{{home}}</div>
            <parent>
                <child></child>
            </parent>
        </div>
    </body>
<script type="text/javascript">
$(function(){
        var lan={
            "home":"首頁"
        }
        var applyData={
            Member_Type: '11',        
            Company_Na: '22'            
        };
        Vue.component('parent',{
      template:'<p>{{Member_Type}}<slot></slot></p>',
        data: function(){  //子組件data只能是function
                return applyData
          },
        });
    Vue.component('child',{
      template:'<p>{{Company_Na}}</p>',
      data: function(){  //子組件data只能是function
                return applyData
          },
    });
        var home = new Vue({
          el: '#home',
          data: lan,
        });
});
</script>

clipboard.png

把<slot></slot>標(biāo)簽去掉22也顯示不出來，slot標(biāo)簽是干嘛的

回答
編輯回答
大濕胸

請查看官方文檔使用插槽分發(fā)內(nèi)容

2018年4月21日 05:29