组件分发部分

<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后面一定要有一个容器包裹,否则会报错,这里template模板里面的内容是作为innerhtml插入的,所以一定要有一个容器*/ <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>

 

  

 

posted @ 2017-05-16 12:27  熊猫哥哥  阅读(966)  评论(0编辑  收藏  举报