vue3父路由与子路由数据绑定

在Vue 3中，父子组件之间的数据绑定可以通过props和emit来实现。下面是一个示例代码，演示了父路由与子路由之间的数据传递和双向绑定：

// 父路由组件
<template>
  <div>
    <h1>父路由组件</h1>
    <input v-model="parentData" type="text">
    <router-view :child-data="parentData" @update-child-data="updateChildData"></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentData: '' // 父路由的数据
    }
  },
  methods: {
    updateChildData(data) {
      this.parentData = data; // 更新父路由的数据
    }
  }
}
</script>

// 子路由组件
<template>
  <div>
    <h2>子路由组件</h2>
    <p>{{ childData }}</p>
    <input v-model="childData" type="text">
    <button @click="updateParentData">更新父路由数据</button>
  </div>
</template>

<script>
export default {
  props: ['childData'], // 接收父路由传递的数据
  emits: ['update-child-data'], // 声明可触发的事件
  methods: {
    updateParentData() {
      this.$emit('update-child-data', this.childData); // 触发更新父路由数据的事件
    }
  }
}
</script>

在上面的代码中，父路由组件通过v-model绑定了一个input元素，子路由组件使用props接收父路由传递的数据，并通过v-model绑定了另一个input元素。当子路由组件中的输入框发生变化时，通过$emit触发了一个自定义事件，并将数据传递给父路由组件。父路由组件接收到子路由组件的数据后，更新了自己的数据。这样就实现了父子路由之间的数据绑定。

希望对你有帮助！如果还有其他问题，请随时提问。