Vue——插槽学习记录

28 阅读1分钟

插槽

1、作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件==》子组件

2、分类:默认插槽、具名插槽、作用域插槽

3、使用方式:

1、默认插槽:

父组件中:
      <Category>
         <div>html结构1</div>
      </Category>
子组件中:
      <template>
         <div>
           //定义插槽
           <slot>插槽默认内容</slot>
       </template>

2、具名插槽:

可以用slot写法

    <div id="app">
      <cpn>
        <span slot="center">标题</span>
      </cpn>
    </div>
​
    <template id="cpn">
      <div>
        <slot><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot><span>右边</span></slot>
      </div>
    </template>

v-slot只能用在组件或者