vue必会API盘点

一、数据相关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>

<!-- 给之前新增成功消息添加.success -->
<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>

const app = new Vue({
  el: "#app",
  data() {
    return {
      isShow: false,
      showWarn: false,
    };
  },
  methods: {
    addFood(show) {
      if (this.food) {
        this.foodList.push({name:this.food});
        this.food = "";
        //显示成功弹窗
        this.isShow = show;
      } else {
          //显示错误信息
          this.showWarn = show;
      }
    },

  },

});

下面实现功能：

<script>
//弹窗组件
Vue.component("message", {
	props: ["show"], //使用props弹窗是否展示是由父组件决定的
	template: `
	        <div class="message-box" v-if="show">
	            <!--具名插槽-->
	            <slot name="title"  title="来自message的标题">默认标题</slot>
	
	            <!--通过slot获取父组件传入的内容-->
	            <slot></slot>
	
	            <span class="message-box-colse"  @click="$emit('update:show',false)">X</span>
	        </div>
	    `,
	mounted(){
	    //挂载之后，使用总线 $bus 去监听，监听者不是它自己，而是总线，
	    //总线会派发 message-close
	    //而如果我收到一个  message-close ， 就执行一个方法，派发一下，让老爹去修改这个属性
		
		//监听关闭事件
	    this.$bus.$on('message-close',() => {
	        this.$emit('update:show',false);//复制template中关闭按钮的事件
	    })
	}
});
</script>

三、组件或元素引用

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 节点或组件实例的数组