在Laravel混合更新后，无法将父组件的对象作为属性传递到Vue中

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 prop中。我可能还应该补充说，在ChildComponent的道具中，context被定义为context: {}。

Answer 1

<template>中没有定义this，并且试图将整个Vue实例传递给子实例似乎是一种反模式。您应该显式定义数据和变量并将其传递给子组件，并且(可选)如果您希望从子组件接收一些数据，则应该发出事件并绑定到父组件中的这些事件。

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

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