vue2创建高复用组件的方法示例
作者：牧林阳
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创建高复用组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！