Vue中slot插槽的使用

Vue slot插槽

组件的插槽:
让封装的组件更加具有扩展性。可以根据条件决定设置内容。
将共性抽取到组件中,将不同暴露为插槽。

  • 插槽的基本使用
  1. 在定义子组件模板时,设置插槽<slot></slot>
  2. 在Vue实例中,在子组件标签内添加对应标签,放入插槽内

Note1: 如果有公共样式,可以在子组件模板内设置默认标签样式,如<slot><button></button></slot>;在Vue实例中使用时,如果不新增则使用默认标签,反之则替换默认的标签内容。


Note2: 在Vue实例中,如果有多个值同时放入到组件内进行替换时,会一起作为替换元素。

//子组件HTML模板
    <template id="temp">
        <div>
            <h2>我是子组件</h2>
            <slot></slot>
        </div>
    </template>
 //Vue实例
     <div id="app">
        <cpn>
            <span>我是插槽</span>
        </cpn>
    </div>
  • 具名插槽的使用
  1. 在定义子组件模板时,给slot标签添加name属性
  2. 在Vue实例中,添加标签时指出对应的具名插槽,以独立封装
//子组件HTML模板
    <template id="temp">
        <div>
            <h2>我是子组件</h2>
            <slot name="left"><span>左边</span></slot>
            <slot name="center"><span>中间</span></slot>
            <slot name="right"><span>右边</span></slot>
            <slot>哈哈哈</slot>
        </div>
    </template>
    // Vue实例
        <div id="app">
        <cpn>
            <!-- 不指定具名插槽的话就会替换默认的插槽,其他的不会替换 -->
            <i>呵呵呵</i>
            <span slot="center">替换中间内容</span>
        </cpn>
    </div>
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页