<div id="app"> <h1>我是app下面的</h1> <baba-component></baba-conponent> </div> <!--这是父组件的部分--> <template id="baba-component"> <span> <h3>我是父组件下面的</h3> <son-component> <p>假如子组件slot里面没有内容就渲染这个部分,否则就渲染slot部分</p> </son-component> </span> </template> <!--这是子组件的部分--> <template id="son-component"> <div> <slot>bgg</slot> </div> </template>/*这里注意几点:1.组件一定要注册,2.template后面一定要有一个容器包裹,否则会报错*/ <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> Vue.component("baba-component",{ template:"#baba-component" }); Vue.component("son-component",{ template:"#son-component" }); var app = new Vue({ el:"#app" }) </script>
组件分发是用来父子之间传递额外的内容(例如模板等),这里主要是通过template标签进行传递的。我们只要记住一点,template标签里面的内容一定要用一个容器包裹
具名slot就是通过slot标签进行匹配,加入没有匹配到的内容,仍然会有一个默认的slot,会把子组件的内容匹配到默认的slot里面去。
<div id="app"> <h2>我是组件的标题{{message}}</h2> <baba-component></baba-component> </div> <template id="baba-component"> <div> <child-component> <div> <h3 slot="header">asdasd</h3> <h3 slot="footer">我是一个会</h3> </div> </child-component> </div> </template> <template id="child-component"> <div> <slot name="header">asdasd </slot> <p>asdadasdas</p> <p>adasdsdsadads</p> <slot name="footer"> 12312312312 </slot> </div> </template>
时间: 2024-11-08 21:48:09