首页<template> <div class="container"> </div> <el-dialog v-model="dialogFormVisible" :title="dialogTitle"> <div> <p>这是组件 B，获取到的参数为：{{ppgod}}</p> </div> </el-dialog> </template> <script lang="ts" setup> import {useRoute} from "vue-router"; import {provide} from "vue"; const dialogFormVisible = false//设置弹窗不显示 const ppgod = useRoute().query.zh; provide('ppgod',ppgod) </script>传值会出现错误吗

<template> <div class="container"> </div> <el-dialog v-model="dialogFormVisible" :title="dialogTitle"> <div> <p>这是组件 B，获取到的参数为：{{ppgod}}</p> </div> </el-dialog> </template> <script lang="ts" setup> import {useRoute} from "vue-router"; import {provide} from "vue"; const dialogFormVisible = false//设置弹窗不显示 const ppgod = useRoute().query.zh; provide('ppgod',ppgod) </script>传值会出现错误吗

时间: 2023-12-07 11:05:56 浏览: 220

这段代码可能会出现错误，因为 provide 的值是在 setup 函数中设置的，而 setup 函数只有在组件实例化之前调用一次。这意味着在 setup 函数之后调用 provide 的其他代码无法访问已提供的值。在这种情况下，建议将提供值的代码移动到组件的 setup 函数之外，并将提供值的代码放在组件的生命周期钩子函数中。例如，可以在 mounted 钩子函数中提供值，如下所示： ```html <template> <div class="container"> <el-dialog v-model="dialogFormVisible" :title="dialogTitle"> <div> <p>这是组件 B，获取到的参数为：{{ppgod}}</p> </div> </el-dialog> </div> </template> <script lang="ts" setup> import { useRoute } from "vue-router"; import { inject } from "vue"; const ppgod = useRoute().query.zh; // 不要在 setup 函数中提供值 // provide('ppgod',ppgod) </script> <script lang="ts"> export default { data() { return { dialogFormVisible: false, dialogTitle: "Dialog Title", }; }, mounted() { // 在 mounted 钩子函数中提供值 provide("ppgod", this.ppgod); }, inject: ["ppgod"], }; </script> ``` 在这个示例中，将提供值的代码移动到了 mounted 钩子函数中，并使用 inject 在组件中访问这个值。这样就可以避免在 setup 函数中提供值而导致的访问问题。

阅读全文