vue solt内容分发/vue通用组件的封装


1:props数据的传递,event事件的触发和solt内容分发构成了vue组件的3个API来源,任何复杂的组件都是由这3个部分构成的

2:即Vue通过组件(针对可复用组件的解耦和样式复用)的封装分为三个部分:

①props:为了解耦,数据从父组件传入,子组件本身不生成数据,即使生成了也只在组件内部使用

②event:在父组件中处理事件,比如clcik事件,逻辑放在父组件中,子组件只是承载,在子组件中用emit触发父组件中的事件

③solt:当需要多个组件组合在一起使用,混合父组件的内容与子组件的模板时,就会用到solt,即内容分发。

④统一管理样式表

例如:多个样式基本相同按钮的封装,结果如下

父组件的代码如下,父组件向子组件传值。内容分发就是将父组件的内容放到子组件指定的位置。

<template>
  <div id="app">
    <aButton>按钮</aButton>
    <aButton type="primary">按钮</aButton>
    <aButton>按钮</aButton>
    <aButton type="danger">按钮</aButton>
    <aButton>按钮</aButton>
  </div>
</template>

在子组件中,将 <solt></solt> 元素作为承载内分发内容的出口


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM