父组件传来的值和子组件自己定义的data的值有什么区别？

props和data的区别？

1、data中的数据是组件内自己的数据（状态）可以随意修改data中的值。

2、props的数据是父组件传递过来的数据，是只读的。（只能供子组件使用，不能随意修改） 

下面进行演示：1.首先创建一个父组件HomeView.vue和两个子组件Left.vue和Right.vue组件

 

 2.我们写一个页面的时候先不去拆分组件，先在父组件中直接写好（个人喜好）然后再将各个板块拆分成组件引入到父组件中。（下面是未进行拆分的代码展示和效果图）注意：v-for渲染本地图片时无法渲染的。可以将图片先引入，然后在放进data中即可。

 

 

 3.将左右组件拆分出来，然后再引入到父组件中去。

HomeView父组件展示

 Left和Right组件展示。

 之后会发现效果图出现问题，控制台报错了 提示 list is not define为什么会出现这种问题？

 首先一开始v-for渲染的数据就是在HomeView父组件中的data里用list存储数据的，但是现在组件拆分出去了之后两个子组件中是没有list数据的所以list是not define。如何要解决这个问题呢？

我们可以通过 组件传值  来解决父组件中引入的子组件上通过自定义属性可以传值。

 

 将list通过：list自定义属性进行传递（：名字可以自定义）。然后在两个子组件中通过props来接受。自定义属性的名字要和v-for in后的名字保持一致建议起同名。

 传递完成之后就发现拆分后效果图可以正常展示，也不会报错。

 然后就回到了题目，props和data的区别。

1、父组件给你的数据是让你用的。他只是传递过去了数据，子组件只是用props来进行接收而数据还是在父组件的data中。所以传递给子组件的数据是只读的无法修改也不能修改。就上面这个例子而言，子组件接受了值要想改变值的话，那只能在HomeView父组件的data中去进行修改。