这篇文章主要介绍了vue 扩展现有组件的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1. 使用vue.mixin全局混入
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。mixins 选项接受一个混合对象的数组。
混入的主要用途
1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。
2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
<h1>Mixins</h1><hr><div id="app"> <p>num:{{ num }}</p><p> <button>增加数量 </P></div>
具名插槽
有些时候我们需要多个插槽, 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：
<div id="itany"> <ul> <li>aaa</li><li>bbb</li><li>ccc</li></ul><ol> <li>111</li><li>222</li><li>333</li></ol></div> <div> <h3>welcome to xiamen</h3></div>
写法二、JSX(比较麻烦)
需要手动将Vue template转为jsx写法，无法使用事件修饰符，部分指令等等，改动比较大
1、导入继承
import {Select} from 'element-ui'; const <b style="color:transparent">本文来源gao@!dai!ma.com搞$$代^@码!网!</b>myElSelect = { extends: Select }
2、 重写render
Vue template最终编译之后也是生成render函数，这里覆盖render函数，
生成自定义内容。此处的意义只是为了记录以便于方便我用render函数时的jsx写法
render() { const tagContent = () => { if (this.collapseTags && this.selected.length) { const tag0 = ( this.deleteTag(e, this.selected[0])} disable-transitions={true}> <span class='el-select__tags-text'>{this.selected[0].currentLabel}</span> ); const tag1 = ( <span class='el-select__tags-text'>+ {this.selected.length - 1}</span> ); if (this.selected.length > 1) { return ( <span> {tag0} {tag1} </span> ); } return ( <span> {tag0} </span> ); } }; const emptyText = () => { if (this.emptyText && (!this.allowCreate || this.loading || (this.allowCreate && this.options.length === 0))) { return ( <p class='el-select-dropdown__empty'>{this.emptyText}</p> ); } }; const selectOption = () => { return ( 0 && !this.loading}> {this.showNewOption ? ( ) : null} { this.$slots.default } {emptyText()} ); }; return ( <div> <div class='el-select__tags'> {tagContent()} {this.selected.map((item, index) => { return ( this.deleteTag(e, item, index)} disable-transitions={false}> <span class='el-select__tags-text'>{item.currentLabel}</span> ); })} </div> <i> this.handleIconClick}/> {selectOption()} </div> ); }
3、 重写method里的deleteTag方法
4、结果
import {Select} from 'element-ui'; const myElSelect = { extends: Select, methods: { deleteTag(event, tag, tagIndex) { // *****略 }, }, render() { return ( <div>例子</div> ); } }; export default myElSelect;
以上这篇vue 扩展现有组件的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持gaodaima搞代码网。
以上就是vue 扩展现有组件的操作的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue 扩展现有组件的操作
转载请注明原文链接：vue 扩展现有组件的操作
