vue必会API盘点

痛定思痛。 2022-11-01 04:19 75阅读 0赞

# 一、数据相关API #

## Vue.set ##

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。  
使用方法： `Vue.set(target, propertyName/index, value)`

## Vue.delete ##

删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。  
使用方法： `Vue.delete(target, propertyName/index)`

# 二、事件相关API #

## vm.$on ##

监听当前实例上的自定义事件。事件可以由 `vm.$emit` 触发。回调函数会接收所有传入事件触发函数的额外参数。

vm.$on('test', function (msg) { 
    console.log(msg)
    })

## vm.$emit ##

触发当前实例上的事件。附加参数都会传给监听器回调。

vm.$emit('test', 'hi')

## 典型应用：事件总线 ##

通过在Vue原型上添加一个Vue实例作为事件总线，实现组件间通信，而不受组件间关系的影响

Vue.prototype.$bus = new Vue();

> 这样做可以在任意组件中使用this.$bus访问到该Vue实例  
> 没有引入vuex之前非常好的一个解决方案

范例：批量关闭多个消息弹窗

/* 重构样式：提取出.success,并添加.warning */
    <style> .message-box { 
    	padding: 10px 20px;
    }
    .success { 
    	background: #4fc08d;
    	border: 1px solid #42b983;
    }
    
    .warning { 
    	background: #f66;
    	border: 1px solid #d63200;
    }
    </style>

<message :show.sync="isShow" class="success">
    	<template v-slot:title="slotProps">
      		<strong>{
       {slotProps.title}}</strong>
    	</template>
    
    	<template> 新增成功！ </template>
    </message>
    
    <message :show.sync="showWarn" class="warning">
    	<template>
    	    <strong>警告</strong>
    	</template>
    	<template> 请输入课程的名称 </template>
    </message>

**下面实现功能：**

# 三、组件或元素引用 #

# ref 和 vm.$refs #

`ref`被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的`$refs`对象上。如果在**普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子组件上，引用就指向组件实例。**

范例：设置输入框焦点

<input :value="value"  ...  ref="inp"/>
     
    <script>
    mounted () { 
      //获取焦点事件
      this.$refs.inp.focus();
    }
    </script>

**需要注意的：**

*  **ref 是作为渲染结果被创建的，在初始渲染时不能访问它们，至少要在mounted钩子后使用。**
 *  **`$refs` 不是响应式的，不要试图用它在模板中做数据绑定**
 *  **当 v-for 用于元素或组件时，`$refs`的引用信息将是包含 DOM 节点或组件实例的数组**