1. API relacionada con los datos
Vue.set
Agregue una propiedad al objeto receptivo y asegúrese de que esta nueva propiedad también responda y active una actualización de vista.
Instrucciones:Vue.set(target, propertyName/index, value)
Vue.delete
Elimina los atributos del objeto. Si el objeto responde, asegúrese de eliminarlo para activar una actualización de la vista.
Instrucciones:Vue.delete(target, propertyName/index)
Dos, API relacionada con eventos
vm. $ en
Escuche eventos personalizados en la instancia actual. El evento puede vm.$emitdesencadenarse. La función de devolución de llamada recibirá todos los parámetros adicionales de la función de activación del evento entrante.
vm.$on('test', function (msg) {
console.log(msg)
})
vm. $ emitir
Activa un evento en la instancia actual. Se pasarán parámetros adicionales a la devolución de llamada del oyente.
vm.$emit('test', 'hi')
Aplicación típica: bus de eventos
Al agregar una instancia de Vue en el prototipo de Vue como un bus de eventos, la comunicación entre los componentes se realiza sin verse afectada por la relación entre los componentes.
Vue.prototype.$bus = new Vue();
De esta manera, puede usar este. $ Bus en cualquier componente para acceder a la instancia de Vue. Una
muy buena solución antes de la introducción de vuex
Ejemplo: cerrar varias ventanas emergentes de mensajes por lotes
/* 重构样式：提取出.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;
}
},
},
});
Se implementan las siguientes funciones:
<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>
Tres, componente o referencia de elemento
ref y vm. $ refs
refSe utiliza para registrar información de referencia para elementos o subcomponentes. La información de referencia se registrará en el $refsobjeto del componente principal . Si se usa en elementos DOM ordinarios, la referencia apunta al elemento DOM; si se usa en componentes secundarios, la referencia apunta a la instancia del componente.
Ejemplo: establecer el foco del cuadro de entrada
<input :value="value" ... ref="inp"/>
<script>
mounted () {
//获取焦点事件
this.$refs.inp.focus();
}
</script>
Necesito prestar atención a:
-
Las referencias se crean como resultado de la renderización y no se puede acceder a ellas durante la renderización inicial, al menos para ser utilizadas después del gancho montado.
-
$refsNo es reactivo, no intente utilizarlo para vincular datos en plantillas -
Cuando se usa v-for para un elemento o componente,
$refsla información de referencia será una matriz que contiene nodos DOM o instancias de componentes