首页 > 代码库 > vue.js单个slot

vue.js单个slot

刚开始看这个slot的时候有点蒙,想了几分钟才明白过来,汗颜

 

<script>
  var mycompoent = Vue.extend({
    template:"<div><h2>子组件标题</h2><slot>如果有内容不显示这句话</slot></div>"
 
})

new Vue({

 el:"#app",
components:{
   "mycomponent":mycompoent
  }
})

</script>
<body>
  <div id="app">
        <h1>父组件标题</h1>
<mycomponent>

   <p>因为有p标签元素,所以slot里面的内容不会显示,可以试试把p标签不要试试</p>

</mycomponent>
  </div>

</body>

 

vue.js单个slot