slot

156 阅读1分钟

插槽 是为了解决组件个性化的问题,给可复用组件预留插槽,让调用的时候再插入内容 先创建一个组件HelloWorld,在创建的时候,在需要预留的地方加入 然后在父组件里调用这个组件,中间插入内容,默认替代slot

子组件内容
<div>
    <h1>{{ msg }}</h1>
    <slot></slot>
  </div>

下面是父组件调用子组件,插入内容代替插槽
<div>
    <HelloWorld>
		<div>替代slot的内容部分</div>
	</HelloWorld>
  </div>

具名插槽,一个组件里有多个slot的时候,给每个slot一个name属性 然后插入的内容上,加一个slot=“xxx”就可以替代对应的插槽

<div>
    <h1>{{ msg }}</h1>
    <slot name="left"></slot>
    <slot name="right"></slot>
  </div>

<HelloWorld>
	<div slot="left">替代slot left</div>
	<div slot="right">替代slot right</div>
</HelloWorld>