element级联二次封装一个省市区组件

记录二次封装 element 的备忘点

v-model 绑定输入值,在template 中属性使用 v-model, v-model 使用的值可以是 computed 来接收值,如果是需要往上级 emit 数据变化的,要在 computed 中的设置 get()、set()

级联无法在封装的组件 v-model 的值改变后反显失败,这里查看了组件源码后发现,这个地方是在渲染的时候绑定了缓存的值,所以要给 el-cascader 添加 key 来让组件能够反显渲染

省市区组件代码



扩展 render 的写法继承 element 组件所有的属性和事件

有时候封装组件是为了组件的一致性限制了组件的属性,有时候需要实现不同的业务需求的时候,又需要用到 element 组件的属性或事件,这种情况就最好把属性都继承过来传递给 element 的原生组件中。

export default {
  render() {
    return (
      <el-input
        vModel={this.model}
        {...{
          attrs: this.$attrs,
          on: this.$listeners,
        }}
        clearable
      ></el-input>
    );
  },
};

你可能感兴趣的:(前端,vue)