组件分发部分

Posted 2020-09-18 熊猫哥哥

<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>