在Vue开发中经常会遇到子组件需要定制一小部分的内容, 实现定制的同时希望孙组件的功能不改动不缺失, 需要用到两个属性 $listeners和$props
$listeners
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用
$props
当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象 property 的访问。
实现代理组件如下:
1
2
3
4
5
<!-- 子组件 -->
<template>
<!-- 孙组件 -->
<component v-bind="$props" v-on="$listeners"/>
</template>
孙组件绑定了父组件所有的属性和方法, 父组件只是简单的传递了这个过程, 很简单.
model
如果只代理某一个参数怎么设置呢？
1
2
3
4
5
6
7
8
9
10
11
12
<!-- 子组件 -->
<template>
<!-- 孙组件 -->
<component :value='attr1' @input="$emit('update:attr1', $event)"/>
</template>
<script>
export default {
props:{
attr1: String
}
}
</script>
举个例子
根据element-ui的el-tooltip组件实现一个小问号图标, 鼠标挪上去展示文本, 类似表单左侧的label名称后面追加问号解释
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
<!-- 孙组件 获取了父组件所有的属性和方法 -->
<el-tooltip v-if="$props.content" v-bind="$props" v-on="$listeners">
<i :class="icon"></i>
</el-tooltip>
</template>
<script>
import { Tooltip } from 'element-ui'
export default {
components: { Tooltip }, // 注册组件
props: {
...Tooltip.props, // 显式声明要合并的props选项
icon: { type: String, default: 'el-icon-question' }, // 自定义的选项
}
}
</script>
