31vue学习——父子组件之间的传值关系

31vue学习——父子组件之间的传值关系

前言

在前面的学习中我们了解了如何定义组件以及组件之间的切换。在组件之间有着父子组件这样子的关系，接下来就让我们来了解一下什么是父子组件以及他们之间的传值关系吧。

1.什么是父子组件？

答：当我们在组件中继续定义组件，形成组件嵌套的时候，就是我们所说的父子组件了。简单的说，父子组件则是组件之间的嵌套。

2.父子组件实例——私有组件

我们可以把 Vue 实例当作一个组件，他的模板对象即是它所控制的区域，那我们在 vue 实例内部的定义的私有组件相对于 vue 实例来说则是他的子组件。

虽然我们的子函数可以获取到父函数的数据，但是经过演示——在子组件中默认无法访问到 父组件中 data 的数据和 methods 中的方法 。

要获取父组件的数据我们需要通过属性绑定将父组件的值 msg 用 parentmsg 来接收后在子组件中的 propos 中定义即可在子组件中使用父组件的

3.子组件中 data 和 props 中数据的区别：

3.1 data 中的数据
（1）子组件中的 data 数据不是通过父组件传递过来的，而是子组件私有的。
（2） 比如：子组件通过 Ajax 请求回来的数据就要放在子组件的 data 中
（3）子组件中的 data 中的数据都是可读可写的

3.2 props 中的数据
（1）组件中 props 中的所有数据都是通过父组件传递给子组件的
（2） props 中的数据都是只读的，不能重新赋值。