<template> <h1>{ { data.counter }}</h1> <br> <h1>{ { data.a.b.counter2 }}</h1> <button @click="data.counter++">counter+1</button> <button @click="data.a.b.counter2++">counter2+1</button> </template> <script> import { reactive, readonly, shallowReadonly } from 'vue' export default { name : "App", setup(){ let data = reactive({ counter : 1, a : { b : { counter2 : 100 } } }); // 深只读(具有响应式的对象的所有属性均不可修改,包括对象的子对象在内的属性,都不可修改) // data = readonly(data); // 浅只读(具有响应式的对象的第一层属性是只读的,更深的属性和子对象属性可以修改) // 只读用在其他组件和当前组件共享响应式数据的时候 // 不希望这个数据被我们当前的组件修改,就使用只读修饰 // 因为那个数据在别的组件用的,只是给我们这个组件可能是显示一下罢了 data = shallowReadonly(data); // 返回对象 return {data}; } } </script> <style> </style><テンプレート>
<h1>{ { データ.カウンター }}</h1>
<br>
<h1>{ { data.abcounter2 }}</h1>
<button @click="data.counter++">counter+1</button>
<button @click="data.abcounter2++">counter2+1</button>
</テンプレート>
<スクリプト>
import { reactive, readonly,shallowReadonly } from 'vue'
デフォルトのエクスポート {
名前：「アプリ」、
設定（）{
let data = リアクティブ({
カウンタ：1、
: {
b:{
カウンタ2：100
}
}
});
// 深い読み取り専用 (オブジェクトのサブオブジェクトのプロパティを含む、応答オブジェクトのすべてのプロパティは変更できません)
// データ = readonly(data);
// 浅い読み取り専用 (応答オブジェクトの第 1 レベルのプロパティは読み取り専用、より深いプロパティとサブオブジェクトのプロパティは変更可能)
// 読み取り専用は、他のコンポーネントが現在のコンポーネントと応答性データを共有する場合に使用されます。
// 現在のコンポーネントによってこのデータが変更されることを望まない場合は、読み取り専用変更を使用してください。
// そのデータは他のコンポーネントで使用されるため、このコンポーネントでの表示のみを目的としています。
データ = 浅い読み取り専用(データ);
//オブジェクトを返す
{データ}を返します;
}
}
</script>
<スタイル>
</スタイル>
import mitt from 'mitt'; // 这个会创建一个对象emitter // 把它当作全局事件总线对象即可 export default mitt();「my」から my をインポートします。
// これによりオブジェクトエミッタが作成されます
// グローバル イベント バス オブジェクトとして扱うだけです
デフォルトのmitt()をエクスポートします。