Question

我最近将项目中的laravel mix更新为最新版本，并立即被Vue错误所淹没。我似乎特别为此挣扎。我有一个组件：

<template>
    <div>
        <ChildComponent :context="this"></ChildComponent>
    </div>
</template>
<script>
    import ChildComponent from './child-component';
    export default {
        components: { ChildComponent },
        ...
    }
</script>

这是我得到的错误：Error in render: "TypeError: Cannot read property 'context' of undefined"。似乎很奇怪，因为在vue-devtools中，父组件在ChildComponent的context属性中作为对象出现。我可能还应该补充一点，在ChildComponent的道具中将上下文定义为context: {}。

Answer 1

this未在<template>中定义，尝试将整个Vue实例传递给孩子似乎是一种反模式。您应该显式定义数据和变量并将其传递给子组件，并且（可选）如果要从子组件接收一些数据，则应发出事件并将其绑定到父组件中的那些事件。

如果必须从子级访问父级组件，则可以在子级组件中使用this.$parent：https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-the-Parent-Component-Instance

但是除非您有充分的理由使用该$parent变量，否则应避免使用它，因为它将组件紧密地耦合在一起。

Laravel Mix更新后，无法将父组件的对象作为prop传递给Vue

1 个答案: