在Vue中，组件传值是非常常见的操作。它可以让我们在不同的组件之间传递数据，从而实现更加灵活的交互效果。在这篇文章中，我们将会讨论如何在Vue中传递姓名和年龄这两个数据。
首先，我们需要创建一个父组件和一个子组件。在父组件中，我们可以定义一个名为“person”的对象，用来保存姓名和年龄。同时，我们还需要在父组件中定义一个方法“changePerson”，用来改变“person”对象的值。在子组件中，我们可以通过props接收父组件传递过来的“person”对象，并且在子组件中展示这些数据。
下面是代码示例：
```html
<!-- 父组件 -->
<template>
<div>
<h>父组件</h>
<p>姓名：{{ person.name }}</p>
<p>年龄：{{ person.age }}</p>
<button @click="changePerson">改变姓名和年龄</button>
<Child :person="person" />
</div>
</template>
<script>
import Child from &;./Child.vue&;
export default {
name: &;Parent&;,
components: {
Child
},
data() {
return {
person: {
name: &;张三&;,
age:
}
}
},
methods: {
changePerson() {
this.person.name = &;李四&;
this.person.age =
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<h>子组件</h>
<p>姓名：{{ person.name }}</p>
<p>年龄：{{ person.age }}</p>
</div>
</template>
<script>
export default {
name: &;Child&;,
props: [&;person&;]
}
</script>
```
在上面的代码中，我们定义了一个名为“person”的对象，并且将其传递给了子组件。在父组件中，我们还定义了一个方法“changePerson”，它会改变“person”对象的值。当我们点击按钮时，就会调用这个方法，并且改变“person”对象的值。在子组件中，我们通过props接收了父组件传递过来的“person”对象，并且在子组件中展示了这些数据。
一下，在Vue中传递姓名和年龄这两个数据非常简单。我们只需要在父组件中定义一个对象，并且将其传递给子组件即可。如果需要改变这些数据，我们只需要在父组件中定义一个方法，并且在子组件中调用即可。希望本文对您有所帮助。