Vue----插槽

最简单的基础插槽<slot></slot>

定义组件然后将内容写入组件标签中间,然后在组件的模板template中通过<slot></slot>将组件标签中间的内容填充到模板上(注意模板必须有一个跟标签)

<body>

<div id="app">

<list-btn>

去啊委屈委屈委屈·1

</list-btn>

</div>

</body>

<script type="text/javascript">

Vue.component('list-btn',{

data:function(){

return {

count:0

}

},

template:`

<div>

<p class='ps'><slot></slot></p>

</div>

`,

})

</script>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 【2019-3-4更新】Vue 2.6+修改了部分语法,对插槽的使用有了较多的更新。在本文中笔者在相应位置给出了更...
    果汁凉茶丶阅读 10,519评论 2 36
  • 阅读之前 本文主要参照了Vue官方文档的插槽部分说明,中间加入的自己的理解,写的比较简洁易懂。各位看官可以对照官方...
    YouthInXian阅读 1,230评论 0 2
  • 什么插槽 官网说明: 在 2.6.0中,我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指...
    全球顶尖伪极客阅读 2,471评论 0 0
  • By Leaf 在学习的过程中遇到了Vue的slot元素,开始不知道也不了解它的用途、用法,即然遇到了不懂的知识点...
    HYC_阅读 5,192评论 7 42
  • 1 从不化妆的女人本身就是一种美,自信的美。譬如虹。 朋友中最不爱化妆的当属虹。虹是人见人爱的姑娘。有回下乡之前还...
    随时随地写人生阅读 3,476评论 12 17

友情链接更多精彩内容