1.データ関連のAPI
Vue.set
レスポンシブオブジェクトにプロパティを追加し、この新しいプロパティもレスポンシブであることを確認して、ビューの更新をトリガーします。
指示：Vue.set(target, propertyName/index, value)
Vue.delete
オブジェクトの属性を削除します。オブジェクトがレスポンシブである場合は、必ずオブジェクトを削除して、ビューの更新をトリガーしてください。
指示：Vue.delete(target, propertyName/index)
2、イベント関連の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>
3、コンポーネントまたは要素の参照
refおよびvm。$ refs
ref要素またはサブコンポーネントの参照情報を登録するために使用されます。参照情報は$refs、親コンポーネントのオブジェクトに登録されます。通常のDOM要素で使用される場合、参照はDOM要素を指します。子コンポーネントで使用される場合、参照はコンポーネントインスタンスを指します。
例：入力ボックスのフォーカスを設定します
<input :value="value" ... ref="inp"/>
<script>
mounted () {
//获取焦点事件
this.$refs.inp.focus();
}
</script>
注意を払う必要があります：
-
参照はレンダリング結果として作成され、少なくともマウントされたフックの後で使用するために、最初のレンダリング中にアクセスすることはできません。
-
$refs反応的ではありません。テンプレートのデータバインディングに使用しないでください -
v-forが要素またはコンポーネントに使用される場合
$refs、参照情報はDOMノードまたはコンポーネントインスタンスを含む配列になります