一、数据相关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 节点或组件实例的数组