vue3 router-view子页面怎么传给父组件值

在 Vue3 中，你可以通过 props（属性传递）将数据从父组件传递到 `router-view` 子页面。这里是一个简单的步骤：

1. **设置 prop**:
父组件需要声明一个 prop，通常是接收子组件想要传递的值的变量。例如，假设你想让子组件传递一个 `message` 变量：

   <template>
     <div>
       <router-view :message="receivedMessage"></router-view>
     </div>
   </template>

   <script>
   export default {
     data() {
       return { receivedMessage: null };
     },
     // ...其他配置
   }
   </script>

2. **子组件发送值**:
子组件在其模板中使用 `props` 接收并更新这个值，然后可以触发 `emit` 事件将其传递给父组件：

   <template>
     <div v-if="$route.meta.showMessage">
       <!-- ...内容 -->
       <button @click="sendMessage">Send Message to Parent</button>
     </div>
   </template>

   <script>
   import { ref } from 'vue';
   export default {
     props: ['message'],
     methods: {
       sendMessage() {
         this.$emit('update:message', '这是从子组件发送给父组件的消息');
       },
     },
   }
   </script>

3. **父组件监听变化**:
父组件需要监听 `message` 的变化，并在接收到新值时处理它：

   setup(props) {
     const showMessage = (newMessage) => {
       console.log('Parent received:', newMessage);
       // 更新界面或者其他逻辑
     };

     onMounted(() => {
       // 如果有默认值或其他初始化操作，可以在这里执行
     });

     watch(
       () => props.message,
       showMessage,
       {
         immediate: true, // 如果子组件初始就发送了值，立即触发
       }
     );

     return {};
   }

当你点击子组件的按钮，`sendMessage` 方法会被调用，会触发 `update:message` 事件，父组件会捕获并更新 `receivedMessage`，从而实现了父子组件之间的数据传递。