問題: 親コンポーネントはマウント時にデータを取得するためにバックエンドへのリクエストを開始し、取得したデータを子コンポーネントに渡します。子コンポーネントはマウント時にデータを取得しようとしていますが、取得できません。
コード例:
//父组件
<template>
<div>
<HelloWorld :message="message"></HelloWorld>
</div>
</template>
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import {
onMounted, ref } from "vue";
const message = ref("1");
onMounted(() => {
//模拟异步请求
setTimeout(() => {
message.value = "1312";
}, 0);
});
</script>
<style scoped></style>
//子组件
<template>
<div>{
{
message}}</div>
</template>
<script setup>
import {
onMounted, defineProps } from "vue";
const props = defineProps(["message"]);
onMounted(() => {
console.log("传递过来的数据", props.message);
});
</script>
<style scoped></style>
印刷結果: props.message は空です。これは親コンポーネント メッセージの初期値ですが、子コンポーネント データは表示できます。
原因分析:
親子コンポーネントのライフサイクルの実行順序は次のとおりです。
読み込みデータのレンダリング処理
- 作成前の親コンポーネント
- 親コンポーネントが作成されました
- 親コンポーネント beforeMount
- 作成前のサブコンポーネント
- サブコンポーネントが作成されました
- マウント前のサブコンポーネント
- サブコンポーネントがマウントされました
- 親コンポーネントがマウントされました
レンダリングデータを更新する
- Update 前の親コンポーネント
- 更新前のサブコンポーネント
- サブコンポーネント更新されました
- 親コンポーネント更新されました
コンポーネントデータの破棄プロセス
- アンマウント前の親コンポーネント
- アンマウント前のサブコンポーネント
- サブコンポーネントがアンマウントされました
- 親コンポーネントがアンマウントされました
上記ロードデータの描画処理を見ると、親コンポーネントのマウントコンポーネントよりも子コンポーネントのマウントコンポーネントが先にマウントされているため、非同期リクエスト以降に取得したデータは取得できないことがわかります。
解決
方法 1: v-if を使用してサブコンポーネントのレンダリングのタイミングを制御する
//父组件
<template>
<div>
<HelloWorld :message="message" v-if="isShow"></HelloWorld>
</div>
</template>
<script setup>
import HelloWorld from "./components/HelloWorld.vue";
import {
onMounted, ref } from "vue";
const message = ref("1");
const isShow=ref(false);
onMounted(() => {
//模拟异步请求
setTimeout(() => {
message.value = "1312";
isShow.value=true;//获取数据成功，再让子组件渲染
}, 0);
});
</script>
<style scoped></style>
方法 2: watch を使用して、親コンポーネントによって渡されたデータを監視する
//子组件
<template>
<div>{
{
message}}</div>
</template>
<script setup>
import {
defineProps,watch} from "vue";
const props = defineProps(["message"]);
//监听传过来的数据
watch(()=>props.message,()=>{
console.log("传递过来的数据", props.message);
})
</script>
<style scoped></style>
