vue3 父子传参 数据失去响应式

在 Vue3 中，如果父组件传递给子组件的数据是响应式的，但是在子组件中修改该数据后，数据却失去了响应式，这可能是因为在子组件中直接修改了父组件传递的数据，而不是通过 emit 事件通知父组件进行修改。正确的做法是在子组件中通过 $emit 方法触发一个自定义事件，并将修改后的数据作为参数传递给父组件，由父组件来修改数据。

相关问题

vue3路由传参如何保持响应式

在 Vue3 中，可以使用路由参数来实现响应式。具体步骤如下：

1. 在路由配置中定义路由参数：

const routes = [
  {
    path: '/user/:id',
    name: 'User',
    component: User
  }
]

2. 在组件中访问路由参数：

import { useRouter } from 'vue-router'

export default {
  setup() {
    const route = useRouter()

    return {
      userId: route.params.id
    }
  }
}

3. 在模板中使用路由参数：

<template>
  <div>
    User ID: {{ userId }}
  </div>
</template>

当路由参数发生变化时，组件中的 `userId` 数据也会自动更新，从而实现了响应式。

vue3 父子传参 校验

在Vue3中，父子组件间v-model传值的方式和Vue2相比有所改变，可通过在子组件中使用“emit”自定义一个名为“update:modelValue”的事件，然后在父组件中使用v-model来绑定这个事件的参数值即可。如下所示：

子组件代码：

<template>
  <div>
    <input type="text" :value="modelValue" @input="handleInput">
  </div>
</template>

<script>
export default {
  props: {
    modelValue: String
  },
  methods: {
    handleInput(e) {
      this.$emit('update:modelValue', e.target.value)
    }
  }
}
</script>

父组件代码：

<template>
  <div>
    <ChildComponent v-model="name"></ChildComponent>
    <p>{{ name }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      name: ''
    }
  }
}
</script>

父组件中使用v-model绑定的“name”变量会作为子组件emit的参数，实现父子组件间的数据双向绑定。