Vue中如何实现父子组件间的值传递详解？

本文共计995个文字，预计阅读时间需要4分钟。

一、简要介绍父子组件之间的传值主要有三种方式：传递数值、传递方法、传递对象。主要通过子组件的props属性和父组件的属性来接收传递的值。

二、父子组件之间的传值方式

1. 传递数值（1）子组件：Header.vuevue {{ num }}

（2）父组件：App.vuevue

一、简要介绍

父子组件之间的传值主要有三种：传递数值、传递方法、传递对象，主要是靠子组件的 props 属性来接收传值，下面分别介绍：

（一）传递数值

1.子组件：Header.vue

<template> <div> <!-- data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性 --> <h2>{{msg}}</h2> </div> </template> <script> export default { data() { return { } }, methods: { }, // 接收父类的传值 props: ['msg'] } </script>

可以看到，在子组件中的data对象里并没有 msg 属性，这里调用的是父类传递过来的 msg 属性，接收就是靠 props: ['msg']。