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中去进行修改。