Vue2中
父子组件传值主要有父
传子和子
传父两种情况：
### 父
传子
父组件向子组件
传值时，子组件通过`props`属性接收父组件
传过来的
值，名字要和父组件
传的
值对应。
示例代码如下：
父组件：
```
vue
<template>
<div>
<!-- 向子组件
传递sonInfo -->
<Son
:sonInfo="sonInfo"/>
</div>
</template>
<script>
import Son from './Son.
vue'
export default {
components
: {
Son
},
data() {
return {
sonInfo
: {
sonName
: '小明',
sonAge
: 12
}
}
}
}
</script>
```
子组件：
```
vue
<template>
<div class="son">
这里是子组件，我们会在这里展示子的信息 {{ sonInfo.sonName }} {{ sonInfo.sonAge }}
</div>
</template>
<script>
export default {
name
: "son",
props
: ["sonInfo"]
}
</script>
<style scoped>
.son {
margin
: 10px;
border
: 1px solid red;
}
</style>
```
此示例中，父组件将`sonInfo`对象
传递给子组件，子组件通过`props`接收并展示信息 [^4]。
### 子
传父
子组件向父组件
传值是通过`this.$emit`触发自定义事件，父组件监听该事件来接收数据。
示例代码如下：
父组件：
```
vue
<template>
<div>
<div>父组件</div>
<!-- 监听子组件emit -->
<Student @sendMsg="sendMsg"/>
<div>父组件接收消息：{{studentMsg}}</div>
</div>
</template>
<script>
// 引入组件
import Student from '../components/Student'
export default {
components
: {
Student
},
data() {
return {
studentMsg
: null
}
},
methods
: {
// 父组件接收子组件消息的方法
sendMsg(name, age) {
this.studentMsg = name + age
}
}
}
</script>
```
子组件：
```
vue
<template>
<div>
<div>子组件</div>
<!-- 通过点击按钮向父组件
传值 -->
<button @click="sendMsg(name, age)">子组件向父组件
传值</button>
</div>
</template>
<script>
export default {
data() {
return {
name
: '张三',
age
: 18
}
},
methods
: {
sendMsg(name, age) {
// 向父组件
传值的方法（多个
值用逗号隔开）
this.$emit('sendMsg', name, age);
}
}
}
</script>
```
该示例中，子组件通过点击按钮触发`sendMsg`方法，使用`this.$emit`触发自定义事件`sendMsg`并
传递`name`和`age`，父组件监听该事件并接收数据 [^3]。
### 父子同步（`.sync`修饰符）
父组件使用`v-model
:xxx`或`.sync`来指定向子组件
传递
值并实现双向绑定。
示例代码如下：
父组件：
```
vue
<template>
<div>
<BaseComp7 v-model
:customModelValue="msg"/>
{{msg}}
</div>
</template>
<script>
import BaseComp7 from "./BaseComp7.
vue"
export default {
name
: "index",
components
: {
BaseComp7
},
data() {
return {
msg
: "父组件msg"
}
}
}
</script>
```
子组件：
```
vue
<template>
<div>
<!-- 子组件可以修改customModelValue -->
<input v-model="customModelValue" @input="$emit('update
:customModelValue', $event.target.value)">
</div>
</template>
<script>
export default {
props
: ['customModelValue'],
methods
: {
// 子组件触发更新事件
updateValue(newValue) {
this.$emit('update
:customModelValue', newValue)
}
}
}
</script>
```
此示例中，父组件使用`v-model
:customModelValue`向子组件
传递`msg`，子组件可以修改`customModelValue`并通过`$emit`触发更新事件，实现
父子组件数据的同步 [^2]。
（较为常用）
扫一扫
2039
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
