vue3コンポーネント間の通信方法（セットアップ構文シュガーライティング）
1. 小道具メソッド
このメソッドは親から子への送信に使用され、親コンポーネントはデータバインディングの形式で送信するデータを宣言し、子コンポーネントはdefineProps()メソッドを通じてpropsオブジェクトを作成して親コンポーネントからデータを取得します。 。
// 父组件
<template>
<div>
<son :msg="state.msg" />
</div>
</template>
<script setup lang="ts">
import son from "./son.vue";
import { reactive } from "vue";
const state = reactive({
msg: "父组件的值"
});
</script>
// 子组件
<template>
<div>
{
{ msg }}
</div>
</template>
<script setup lang="ts">
const props = defineProps({
msg: {
type: String,
default: ""
}
});
</script>2. 発光モード
emitこのメソッドは、Vue で最も一般的なコンポーネント通信メソッドでもあり、子から親に渡すために使用されます。
// 父组件
<template>
<div>
<son @myClick="handleClick" />
</div>
</template>
<script setup lang="ts">
import son from "./son.vue";
const handleClick = val => {
console.log(val);
};
</script>// 子组件
<template>
<div>
<button @click="handleClick">点击</button>
</div>
</template>
<script setup lang="ts">
const emit = defineEmits(["myClick"]);
const handleClick = () => {
emit("myClick", "我是子组件的值");
};
</script>3、定義露出
コンポーネント内のメソッドと変数を取得するには、defineExpose+ref を使用します。
// 父组件
<template>
<div>
<son ref="sonRef" />
<button @click="handleClick">点击</button>
</div>
</template>
<script setup lang="ts">
import son from "./son.vue";
import { ref } from "vue";
const sonRef = ref(null);
const handleClick = val => {
console.log(sonRef.value.msg);
};
</script>// 子组件
<template>
<div>
son
</div>
</template>
<script setup lang="ts">
defineExpose({
msg: "我是子组件"
});
</script>4. 提供/注入
Provide/inject は Vue で提供される API のペアです。階層がどれほど深くても、API は親コンポーネントから子孫コンポーネントへのデータ転送を実現できます。
// 父组件
<template>
<div>
<son />
</div>
</template>
<script setup lang="ts">
import son from "./son.vue";
import { provide } from "vue";
provide("msg", "我是父组件");
</script>// 子组件
<template>
<div>
{
{ data }}
</div>
</template>
<script setup lang="ts">
import { inject } from "vue";
const data = inject("msg");
</script>5、属性
attrs は、props、style、class 以外の属性を受け入れることができます。
// 父组件
<template>
<div>
<son :msg="state.msg" :hello="state.hello" />
</div>
</template>
<script setup lang="ts">
import son from "./son.vue";
import { reactive } from "vue";
const state = reactive({
msg: "我是父组件",
hello: "hello"
});
</script>// 子组件
<template>
<div>
son
</div>
</template>
<script setup lang="ts">
import { useAttrs } from "vue";
const attrs = useAttrs();
console.log(attrs.msg); // 我是父组件
</script>6. v-model メソッド
v-model は厳密にはデータ伝送方式ではありませんが、実際にはコード量を削減するだけです。
// 父组件
<template>
<div>
<son v-model:msg="state.msg" />
{
{ state.msg }}
</div>
</template>
<script setup lang="ts">
import son from "./son.vue";
import { reactive } from "vue";
const state = reactive({
msg: "我是父组件"
});
</script>サブコンポーネントは、update:xxx というイベントを発行し、更新される応答データを Emit メソッドの 2 番目のパラメーターに渡す必要があります。
// 子组件
<template>
<div>
son
<button @click="handleClick">点击</button>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
msg: {
type: String,
default: ""
}
});
console.log(props.msg);
// 子组件需要emit一个叫update:xxx的事件，再把需要更新的响应式数据传给emit方法的第二个参数即可
const emit = defineEmits(["msg"]);
const handleClick = () => {
emit("update:msg", "我是子组件");
};
</script>7. ビュークス / ピニア
Vuex と Pinia は Vue 3 の状態管理ツールであり、この 2 つのツールを利用することで簡単にコンポーネント通信を実現できます 具体的な使用方法については公式ドキュメントを参照してください。