鍍金池/ 問答/HTML/ vue怎樣讓三個組件顯示在另一個組件里面？

vue怎樣讓三個組件顯示在另一個組件里面？

我想讓one two three這三個組件都顯示在info里面 應該怎么寫呢？我這樣寫不對

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
   #per{color: red}
   </style>
   <script src="vue.js"></script>
   <script type="text/javascript">
      window.onload=function(){
          var one = {    
             template : "#one"  
          };
          var two = {    
             template : "#two"  
          };
          var three = {    
             template : "#three"  
          };   
          new Vue({ 
            el: "#app",
            data:{ 
            },
            components:{
              "info" : one
            }
          }); 
         
   }
   </script>
</head>
<body>
<template id="one">     
  <span>1111</span>
</template>

<template id="two">     
  <span>2222</span>
</template>

<template id="three">     
  <span>3333</span>
</template>

<div id="app">
  <info>
      <one></one>
      <two></two>
      <three></three>
  </info>
</div>
</body>
</html>
回答
編輯回答
使勁操

首先你應該先掌握一下vue插槽的概念，插槽。
掌握后去嘗試，然后你會發(fā)現就算你給組件one加上插槽

<template id="one">
  <span>1111<slot></slot></span>
</template>

還是沒有效果，這時你應該通讀一遍vue組件注冊的文檔 組件注冊
然后就會發(fā)現原因是你的組件沒有注冊，你可以把你的組件改為用Vue.component注冊成全局組件，也可以比較簡單的把你的組件直接掛載在實例上進行局部注冊

 new Vue({
  el: "#app",
  data: {},
  components: {
    "info": one,
    one,
    two,
    three
  }
});

好了，實現你的需求了，其實這些都是基礎簡單到過一遍文檔就可以掌握的知識點，并不應該成為問題

2018年5月15日 12:57