vue.js单个slot

Posted GoTime

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的主要内容,如果未能解决你的问题,请参考以下文章

vue.js 2 - 将单个文件组件的 html 片段提取到独立文件中

Vue.js(17)之 插槽

vue.js 中slot 用处大(转载)

通过 Vue.js 中的 slot-scope 将 props 传递给所有子项的正确方法

Vue.js 源码分析—— Slots 是如何实现的

slot 插槽的作用域用法(摘自vue.js 官网)