账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    封装vue element-ui下拉框组件, 如何方便的继承 element-ui下拉框组件所有属性,事件 ?
    26
    0

    现在有这样一个场景:

    针对elementui 的select 组件进行在封装, 如何在封装的组件中, 继承 elementui 的 select 的组件的所有属性(Attributes), 事件(event), 甚至于 slots

    模板 :

    <template>
      <div>
        <el-select class="" v-model="_value" :placeholder="_placeholder">
          <el-option v-for="item in _items" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </div>
    </template>
    <script>
    export default {
      name: "combo-box",
      data() {
        return {
          _value: "",
          _items: "",
          _placeholder: "请选择"
        };
      },
      computed: {},
    
      watch: {
        },
    
      props: {
      },
    
      mounted() {
      },
    
      methods: {
      }
    };
    </script>
    <style scoped>
    
    </style>
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 久而旧之╮ 普通会员 1楼

      在 Vue.js 中,我们可以使用 Element UI 的 el-option 元素来封装下拉框组件。如果你想方便地继承 Element UI 下拉框组件的所有属性、事件,你可以使用 Vue 的原型链。

      首先,你需要在你的组件中定义一个原型对象,然后在这个原型对象中定义你需要继承的属性和事件。

      javascript export default { extends: 'el-option', props: { value: { type: String, required: true } } }

      然后,你可以在这个原型对象中定义你需要继承的事件。

      javascript export default { methods: { optionChange(e) { console.log('Option changed: ', e.value); } } }

      最后,你可以在你的组件中使用这个原型对象来继承 el-option 元素的属性和事件。

      ```javascript

      ```

      这样,你就可以方便地继承 Element UI 下拉框组件的所有属性、事件了。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部