Vue 组件的实现思考

[wuweijia]

组件的抽象标准：

1. 抽象力度（父级可控属性，是否写入组件，如组件的显示隐藏，组件定位的位置是否传值：eg：国编码选择组件） 暂定：父级控制外在表现
2. 组件的拆分力度 （这个情况需要两个及以上人讨论，具体情况具体分析）。
3. 组件的注释说明要详细，需要使用者不需要过多的关注代码逻辑本身。
4. 如果使用者需要修改组件应尽量将组件提交给原作者review。
5. 事件

slot使用

*这个地方解决了有些特殊页面不带有约这个字很灵活。

例：我们现在要封装一个alert组件

• 有些地方是否要支持可以传html模板

<template>
    <div class="vux-alert">
        <x-dialog :value='alertShow' :isClose='false'>
            <div class="crib-confirm_hd" :style='[titleStyle]'>
                <strong class="crib-confirm_title">{{title}}</strong>
            </div>
            <div class="crib-confirm_bd">
                <slot>
                    <div v-html="content"></div>
                </slot>
            </div>
            <div class="crib-confirm_ft">
                <a href="javascript:;" class="crib-confirm_btn crib-confirm_btn_primary" @click="_onSubmit" :style='[buttonStyle]'>{{buttonText}}</a>
            </div>
        </x-dialog>
    </div>
</template>

1. 我们发现唯一特别的是对content体中的定义了一个solt。这个slot就是组件模式和插件模式的区分。如果我们想对slot里面定义的是一个额外的展示模板或其它组件插入的话，此时只能用组件模式。

2. 如果只是我们对content这个数据进填充的话，插件模式最方便的。

props

1. value (显示消息)
2. title (标题)
3. content (内容最好支持html格式)
4. buttonText (底部的按钮文案)
5. titleStyle (标题样式)
6. buttonStyle (button样式)

事件

1. 点击时向外暴露事件
2. 显示隐藏时向外暴露的显示事件 (非必须)
3. 善用.sync 修饰符