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创建高复用组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用
这篇文章主要介绍了Element-ui自定义table表头、修改列标题样式、添加tooltip、:render-header使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
在Vue项目中,通过.env文件配置环境变量,支持不同环境下加载不同配置,Vite通过import.meta.env向应用暴露环境变量,支持基本URL、开发环境和生产环境识别等,.env文件可设置环境优先级,修改后需重启生效,TypeScript可通过增加文件获取智能提示2024-10-10
这篇文章主要介绍了vue实现滚动条下滑时隐藏导航栏,上滑时显示导航栏,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-07-07
下面小编就为大家分享一篇elementui的默认样式修改方法，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧2018-02-02
Mockjs是一个用于生成随机数据和拦截Ajax请求的库,可以与Vue和Axios结合使用,提高前端开发效率,通过在项目中引入Mock.js文件,可以模拟后端API,拦截Ajax请求并返回自定义响应,这种方法适用于在后端尚未开发完成时的前端开发测试2024-10-10
这篇文章主要介绍了Vuex 入门教程，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式, 那这个 vuex 怎么用呢？就具体来看一下吧2018-01-01
去年，vue3出来了。增加了很多新功能，但是也删掉了一些功能。比如删掉了vue2中的过滤器filter功能。与此同时，官方建议：用方法调用或计算属性替换过滤器。本文将分析vue3删除过滤器的原因及如何用其他方法实现过滤器的功能2021-05-05
下面小编就为大家分享一篇浅谈vue.js导入css库(elementUi)的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本文介绍基于Vue3的媒体预览组件,支持图片与视频预览,具备缩放、旋转、拖拽功能,采用ElementUI Dialog容器,通过计算属性实现动态样式,优化拖拽性能,自动调整方向,便于集成使用2025-08-08
这篇文章主要介绍了Vue2 响应式系统之数组，本文接着上几篇文章Vue2响应式系统 、Vue2 响应式系统之分支切换，响应式系统之嵌套、响应式系统之深度响应 展开相关内容,需要的朋友可以参考一下2022-04-04
最新评论