vue组件化常用技术

612 阅读1分钟

一、组件通信方式

二、插槽

  • 匿名插槽
    应用场景一般是:子组件只有一个插槽
    //子组件 com1
    <div>
       <slot></slot>
    </div>
    //父组件
    <com1>
        <p>插入的内容</p>
    <com1>
  • 具名插槽
    对应插槽名字插入内容
    //子组件 com1
    <div>
       <slot name="header"></slot>
       <slot name="footer"></slot>
    </div>
    //父组件
    <com1>
        //v-slot:name简写方式为#name
        <template v-slot:header>头部内容</template>
        <template v-slot:footer>尾部内容</template>
    <com1>
  • 作用域插槽
    子组件传数据到父组件
    //子组件 com1
    <div>
       <slot name="header" :user="user"></slot>
    </div>
    //父组件
    <com1>
        <template v-slot:header="slotProps">头部内容</template>
        //解构的方式
        <template v-slot:header="{user}">头部内容</template>
    <com1>

注意:slotProp是一个对象,slotProps.key获取到子组件传过来的值,所以可以通过解构的方式