脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue2创建高复用组件

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.js制作一个拼图华容道小游戏

    利用Vue.js制作一个拼图华容道小游戏

    这篇文章主要为大家详细介绍了如何利用Vue.js编写一个拼图华容道游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Vue $emit()不能触发父组件方法的原因及解决

    Vue $emit()不能触发父组件方法的原因及解决

    这篇文章主要介绍了Vue $emit()不能触发父组件方法的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 关于iview按需引用后使用this.$Modal报错的解决

    关于iview按需引用后使用this.$Modal报错的解决

    这篇文章主要介绍了关于iview按需引用后使用this.$Modal报错的解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue中keep-alive、activated的探讨和使用详解

    vue中keep-alive、activated的探讨和使用详解

    这篇文章主要介绍了vue中keep-alive、activated的探讨和使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue echarts实现航班选座案例分析

    vue echarts实现航班选座案例分析

    这篇文章主要介绍了vue echarts实现航班选座案例分析,代码是使用echarts来实现的，主要用到的是svg和自定义地图的相关知识，需要的朋友可以参考下
    2022-05-05
  • 详解jquery和vue对比

    详解jquery和vue对比

    这篇文章主要介绍了jquery和vue对比，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 如何优雅地在vue中添加权限控制示例详解

    如何优雅地在vue中添加权限控制示例详解

    这篇文章主要给大家介绍了关于如何优雅地在vue中添加权限控制的相关资料，文中通过示例代码以及图文介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-03-03
  • vue3无法使用jsx的问题及解决

    vue3无法使用jsx的问题及解决

    这篇文章主要介绍了vue3无法使用jsx的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue 实现的树形菜的实例代码

    vue 实现的树形菜的实例代码

    这篇文章主要介绍了vue 实现的树形菜单,需要的朋友可以参考下
    2018-03-03
  • 详解Vue中的MVVM原理和实现方法

    详解Vue中的MVVM原理和实现方法

    这篇文章主要介绍了Vue中的MVVM原理和实现方法，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
    2020-07-07

最新评论