数据相关API

Vue.set

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

使用方法：vue.set(target, propertyName/index, value)

范例：批量设置商品价格

<template>
<!--添加批量价格更新-->
<p>
<i nput v-model.number="pri ce">
vbutton @click="batchupdate"> 批量更新价格 </button〉
</p>
<div class="course-list" v-else>
<div v-for="c i n courses" :key="">
<!--添加批量价格更新-->
{{  }} - �{{c.price}}
</div>
</div>
</template>
<script>
function getCourses() { return new Promise(resolve => { setTimeout(() => {
    // 修改返回数据结构为对象
        resolve([{ name: '测试1’}, { name: '测试2’}])
    }, 2000);
})
const app = new Vue({
data() {
    return {
        price: 0 // 增加价格数据
    }
},
methods: {
    // 添加批量价格更新方法
    batchUpdate() {
        this.courses.forEach(c => {
           Vue.set(c, 'price', this.price); // ok
        }) }
    },
}
</script>

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();

I这样做可以在任意组件中使用thi s. $bus访问到该Vue实例

范例：批量清除多个消息窗口

// 弹窗组件
vue.component('message', {
// ...
// 监听关闭事件
mounted () {
        this.$bus.$on('message-close', () => { this.$emit('update:show', false)
    });
    },
})
<!-- 派发关闭事件 -->
<div class="toolbar">
<button @click="$bus. $emit('message-close')">清空提示框</button> </div>

vm.$once

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。

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

})

vm.$off

移除自定义事件监听器。

・如果没有提供参数，贝0移除所有的事件监听器；

・如果只提供了事件，贝U移除该事件所有的监听器；

・如果同时提供了事件与回调，则只移除这个回调的监听器。

vm.$off() //移除所有的事件监听器

vm.$off('test') //移除该事件所有的监听器

vm.$off('test', callback) //只移除这个回调的监听器

组件或元素引用

reff和 vm.$refs

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通

的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件

范例：设置输入框焦点

<input type="text" ... ref="inp">
mounted(){
// mounted之后才能访问至this.$refs.inp.focus()
}
范例：改造message组件用打开、关闭方法控制显示
<!--自定义组件引用-->
<message ref="msg">新增成功！ </message>
<script>
Vue.component('message', {
//组件显示状态
data() {
    return {
        show: false
    }
},
template: '
<div class="message-box" v-i f="show">
<slot></slot>
<!--toggle内部修改显示状态-->
<span class="message-box-close" @cli ck="toggle">X</span> </div>
,
//增加toggle方法维护toggle状态
methods: {
    toggle() {
    this.show = !this.show;
}
},
// 修改 message-close 回调为 toggle
mounted () {
    this.$bus.$on('message-close', this.toggle);
},
})
const app = new vue({
methods: {
addcourse() {
        //使用$refs.msg访问自定义组件
        this.$refs.msg.toggle()
        }
    }
})
</script>

注意：

-ref是作为渲染结果被创建的，在初始渲染时不能访问它们

・$refs不是响应式的，不要试图用它在模板中做数据绑定

当v-for用于元素或组件时，引用信息将是包含DOM节点或组件实例的数组。