使用一种方式混合父组件的内容与子组件自己的模板，这个过程被称为“内容分发”。在子组件中使用特殊的<slot>元素作为内容的插槽。
一、单个slot
在子组件模板中有slot标签，被视为备用内容，在父组件不提供内容的情况下使用。如果父组件提供内容，则把整个内容片段插入到slot所在的DOM位置，并替换掉slot标签本身。
子组件模板中没有slot标签，父组件提供的内容会被抛弃
如果替换的内容较多，可以直接用一个template替换。
<div id="app"> <h2>自定义组件</h2> <custom> <!-- 当卸载自定义标签之前的内容，要混合子组件中的模板 --> <div>我是父组件提供的内容，我的存在会替换子组件中slot标签内的内容</div> </custom></div><script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script><script> Vue.component('custom',{ template:` <div> <slot> <div>我备用内容，如果子组件中有内容会替换我哦~</div> </slot> </div> ` }) new Vue({ el:"#app" })</script>见证奇迹的时候到了，页面上会显示如下内容
注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。