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

Posted 2023-02-23

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

【英文标题】：Cannot manipulate with data property as an object if it is passed from parent to child component in VueJs

【发布时间】：2020-02-22 11:25:09

【问题描述】：

我试图访问从父组件传递到子组件的对象数据属性，但 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 属性在子组件中未定义的错误。 我该如何解决这个问题？

【问题讨论】：

什么是value？你的app-full-name 组件是什么样子的？

当你得到一个 props 值，并传递一个模型，数据应该到达 value 属性，我建议你更好地组织这个 props 语句。例如：props: value: type: Object, default: () => 如果这不起作用，我会更改属性名称，并尝试通过基于直接道具传递信息来提供信息。例如：child: props: myValue: type: Object, default: () => ，父亲：

【参考方案1】：

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

//Parent file
<app-full-name your-data="fullname"></app-full-name>

//Child file (app-full-name)
...
props:['yourData']

这样，您将“您的数据”作为道具发送给您的孩子。请记住，您无法在子级中更改此值，如果需要更新它，则应通过事件（发射）进行。

孩子发送一个事件（发出它），而父母正在监听数据中的属性变化。比如：

//child
this.$emit('changeData')

//parent
@changeData="changeData"
function changeData() //the changes here 

您可以阅读更多相关信息，here

希望对你有帮助！