vue,插槽的用法。

555 阅读1分钟

slot在组件中的用法

slot,插槽,就像一个插销一样,是子组件给父组件留的一个占位符,插槽分为具名插槽和不具名插槽。以下是具名插槽的用法。

父组件,引入子组件的地方
<child ref="child">
	//这里边写的都是插槽内的东西,我们常见的组件里边,这里是空的
    <template v-slot:header>
       //这里可以放子组件里传递给父组件的事件,可以不用频繁传参。
    	<div slot="footer" class="dialog-footer">
    		<el-button @click="funA">取 消</el-button>
    		<el-button type="primary" @click="funB">确 定</el-button>
    	</div>
    </template>
</child>
子组件内容
	//子组件其他的代码。
    <slot name="header" />