vue2创建高复用组件的方法示例
更新时间：2024年07月12日 08:57:19 作者：牧林阳
Vue2中的高复用组件通常是指那些设计得足够通用,并能多次在项目中重复使用的组件,本文给大家详细介绍了vue2创建高复用组件的方法示例,并通过代码示例讲解的非常详细,需要的朋友可以参考下
1.使用 v-bind="$attrs"，主要用于在组件树中自动传递属性，当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定。相当于把父组件用到的属性自动获取。
<el-button :type="getButtonType"
:icon="getIcon"
v-bind="$attrs"
size="small"
class="u-ptype-button">
<slot></slot>
</el-button>2.使用 v-on="$listeners"，
- 自动传递事件监听器：
v-on="$listeners"会收集父作用域中的(不含.native修饰器的)v-on事件监听器，并把它们添加到当前组件的实例上。 - 简化组件间通信：通过自动传递事件监听器，简化了父组件与子组件之间的通信方式，使得开发者可以更专注于业务逻辑的实现。
<el-button :type="getType"
:icon="Icons"
size="small"
v-on="$listeners"
class="ptype">
<slot></slot>
</el-button>3.如果要在子组件标签上使用v-model属性
你可以在组件内部使用model选项来定义：
- prop名：这个prop用于接收父组件通过
v-model绑定的值。 - event名：当子组件需要更新这个值时，它会触发一个事件，该事件的名称由
model选项中的event属性指定。
<template>
<input
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
type="text"
/>
</template>
<script>
export default {
name: 'MyCustomInput',
props: {
modelValue: String // 接收的值，与v-model绑定的prop名一致
},
emits: ['update:modelValue'], // 明确声明发出的事件
model: {
prop: 'modelValue', // 父组件通过v-model绑定的prop名
event: 'update:modelValue' // 子组件触发以更新v-model的事件名
}
}
</script>//子组件 <MyCustomInput v-model="inputValue" />
- 这里，v-model="inputValue"会被Vue解析为:modelValue="inputValue" @update:modelValue="inputValue = $event"。
- v-model的默认prop和event分别是modelValue和update:modelValue。但你可以通过组件的model选项来自定义它们
到此这篇关于vue2创建高复用组件的方法示例的文章就介绍到这了,更多相关vue2创建高复用组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue是当今增长最快的前端框架,Vue 平易近人、用途广泛且性能卓越,它的语法非常直观,并且具有友好的学习曲线,是开发人员最想学习的顶级前端库之一,下面这篇文章主要给大家介绍了关于vue管理系统项目中的一些核心技能,需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了Vue3如何结合pywebview实现获取本地文件夹的绝对路径,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2024-11-11
这篇文章主要介绍了Vue 组件注册全解析的相关资料，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-12-12
这篇文章主要介绍了Vue项目history模式下微信分享爬坑总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
在最近的一个项目中我需要实现表格的翻页,并且还要实现全选、多选功能,下面这篇文章主要给大家介绍了关于vue如何基于el-table实现多页多选及翻页回显过程的相关资料,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue中实现文字检索时候将搜索内容标红,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了vue使用echarts如何实现双柱状图和双y轴的柱状图问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这几天，我做了一个vue移动端的小项目，本文主要介绍了Vue移动端apk项目，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-06-06
这篇文章主要介绍了vue的v-if里实现调用函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了vue中如何给多个按钮动态添加类名问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
最新评论