Vue中对组件二开的方法是什么

发布时间:2023-04-17 11:10:15 作者:iii
来源:亿速云 阅读:107

这篇文章主要介绍“Vue中对组件二开的方法是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Vue中对组件二开的方法是什么”文章能帮助大家解决问题。

一、背景

在对antdv、element、自定义组件二开过程中,最困扰的问题如下:

这个是准备去做二开UI组件的时候,遇到的几个不能一下子就能打开思路的问题;

二、解决思路以及方案

前两个问题比较简单,利用$attts$listeners两个组件属性就能解决。

a. $attts :继承所有的父组件属性 (除了 prop 传递的属性、class 和 style ) **,一般用在子组件的子元素上;

b $listeners:它是一个对象,里面包含了作用在这个组件上的所有监听器,你就可以配合v-on="$listeners"将所有的事件监听器指向这个组件的某个特定的子元素。(相当于子组件继承父组件的事件)

<templete>
  <div>
    <div>{{ text }}</div>
    <el-input v-bind="$attts" v-on="$listeners" placeholder="请输入内容"></el-input>
  </div>
</templete>
<script>
export default {
  props:{
    text:String,
  }
  mounted(){
    console.log(this.$attrs)
  }
}
</script>
<templete>
  <div>
    <child type="text" v-model="input" text @blur="onBlur"></div>
  </div>
</templete>
<script>
export default {
  data() {
    return {
      input: '',
      text:'子组件的props'
    }
  },
  methods:{
    onBlur(){
      // ...
    }
  }
}
</script>

关于调用子组件中的方法(子组件拿不到父组件的ref),网上也看到了很多方案,从便捷度来说,我个人更倾向于将方法直接绑定在组件实例上。

tips:** 善用object中的entries**,返回Array<[key:string, value:any?]>类型的二维数组

<templete>
  <div>
    <child ref="childRef" type="text" v-model="input" text @blur="onBlur"></div>
  </div>
</templete>
<script>
export default {
  data() {
    return {
      input: '',
      text:'子组件的props'
    }
  },
  mounted(){
    console.log(this.$ref.childRef)
  },
  methods:{
    onBlur(){
      // ...
    }
  }
}
</script>
<templete>
  <div>
    <div>{{ text }}</div>
    <el-input ref="inpRef" v-bind="$attts" v-on="$listeners" placeholder="请输入内容"></el-input>
  </div>
</templete>
<script>
export default {
  props:{
    text:String,
  }
  mounted(){
    console.log(this.$attrs)
    // 绑定ref到组件实例上
    const entries = Object.entries(this.$ref.inpRef)
    for(const [key, value] of entries){
      this[key] = value;
  	}
}
</script>

插槽主要用的$slots,这边对作用域插槽数据做了兜底,不然会报错;

tips: 在vue模版中遍历对象**,会拿到* value、name*两个值

<templete>
  <div>
    <child ref="childRef" type="text" v-model="input" text @blur="onBlur">
    	<template slot="prepend">Http://</template>
    </child>
  </div>
</templete>
<script>
export default {
  data() {
    return {
      input: '',
      text:'子组件的props'
    }
  },
  mounted(){
    console.log(this.$ref.childRef)
  },
  methods:{
    onBlur(){
      // ...
    }
  }
}
</script>
<templete>
  <div>
    <div>{{ text }}</div>
    <el-input ref="inpRef" v-bind="$attts" v-on="$listeners" placeholder="请输入内容">
      <templete v-for="(value, name) in $slot" #[name]="slotData">
        <slot :name="name" v-bind = "slotData || {}"></slot>
      </templete>
    </el-input>
  </div>
</templete>
<script>
export default {
  props:{
    text:String,
  }
  mounted(){
    console.log(this.$attrs)
    // 绑定ref到组件示例上
    const entries = Object.entries(this.$ref.inpRef)
    for(const [key, value] of entries){
      this[key] = value;
  	}
}
</script>

关于“Vue中对组件二开的方法是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。

推荐阅读:
  1. vue怎么使用js对图片进行点击标注圆点并记录它的坐标
  2. vue怎么预览pdf、word、xls、ppt、txt文件

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:Go代码格式化gofmt如何使用

下一篇:vue中内网/局域网/离线的情况下怎么使用及建立

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》