如果数据属性在VueJs中从父组件传递到子组件，则无法将其作为对象进行操作

Question

我试图访问从父组件到子组件的传递对象数据属性，但vue抛出了一个无法访问它们的异常。这是我的父组件

<app-full-name v-model="fullname"></app-full-name>
<script>
export default {
components:{
appFullName: FullName
},
data() {
return {
fullname: {
f:'Bassem',
l: 'Samir'
},
}
}
}
</script>

在子组件中

<script>
export default {
props:['value'],
methods: {
changeName(isFirst, event){
let name = "";
if(isFirst){
name = this.value.f+" ";
}
else{
name = this.value.l+" "+this.value.l;
}
},  
},
}
</script>

Vuejs抛出一个错误，即f属性在子组件中未定义。我该怎么解决这个问题？

Answer 1

您得到一个undefined，因为您正在访问一个未定义的道具'value'。如果你想在父->子之间共享数据，你应该使用：

//Parent file
<app-full-name your-data="fullname"></app-full-name>
//Child file (app-full-name)
...
props:['yourData']

通过这种方式，你将"你的数据"作为道具发送给你的孩子。请记住，您不能在子项中更改此值，如果需要更新它，则应通过事件(emit(进行更新。

子级发送一个事件(发出它(，而父级正在侦听以对数据进行推进更改。类似于：

//child
this.$emit('changeData')
//parent
@changeData="changeData"
function changeData(){ //the changes here }

你可以在这里阅读更多关于它的信息

希望它能有所帮助！