vue的 $ 相关 api 配置

Posted 2022-02-05 嘿起屁儿整

vue api 配置

• $ref
• • $el
  • $listeners
  • $attrs
  • $slots
  • $parent
  • $set
  • $delete

$ref

vue组件实例：啥都有，包括data数据、methods等

$el

当前节点信息：与document获取节点一样
this.$refs.xxx.$el 等于document.getElmentById('xxx')

$listeners

父组件给子组件传递的方法：子组件批量接收并使用：可用来封装elment为高阶组件

父组件：<MyTable @pagination-size-change="paginationSizeChange"></MyTable >
子组件：<el-table v-on="$listeners">

$attrs

父组件给子组件传递的属性：子组件批量接收并使用：可用来封装elment为高阶组件
针对于子组件没有用props接收的属性（已用props接收的优先考虑props，style和class除外）

父组件：<MyTable :wasai="wasai"></MyTable >
子组件：<el-table v-on="$attrs"> 子组件没有props接收wasai，但是有$attrs也会自动添加上属性

$slots

父组件使用子组件，并使用插槽：子组件获取父组件的插槽

父组件：<MyTable>
			<template #footer>
				随机内容
			</template>
		</MyTable >
子组件：<el-dialog>
		  <template v-if="$slots.footer" #footer>
      		<slot name="footer"></slot>
    	  </template>
       </el-dialog>

$parent

父实例

$set

给目标对象的具体属性强制赋值
三个值：目标对象、具体属性、赋值
this.$set(this.formConfig.results, 'mcsRegno', mcsProdBRegcertRespDTO.mcsRegno);

$delete

删除目标对象的具体属性
两个值：目标对象、具体属性
this.$delete(this.selectList, item.hospListId);