Vue JS 中的父/子方法答案

【问题标题】：Parent/Child methods in Vue JSVue JS 中的父/子方法
【发布时间】：2016-11-07 14:04:32
【问题描述】：

我试图在子 VUE 实例中调用一个方法，但我不知道为什么它似乎不起作用。

我的Vue如下：

家长

var content = new Vue({
    el: '.content-container',
});

儿童

var vm = new Vue({
    el: '#form',
    parent: content,
    data: {
        postcode: null,
    },
    methods: {
        lookupAddress: function (event) {
            event.preventDefault();
            // Lookup Address
        },
    },
});

但是，我在 Vue 开发工具中不断收到以下错误：v-on:click="lookupAddress" expects a function value, got undefined

关于为什么它没有在子实例上选择方法的任何想法？我在 childs 元素中调用该方法。

编辑我的 HTML 标记如下：

<body>
    <div class="content-container">
        <form id="form">
            ...
        </form>
    </div>
</body>

【问题讨论】：

需要您的标记
在@YerkoPalma 上方添加了 HTML
只是一个猜测，但可能是因为它认为方法lookupAddress 应该在父vue 上（并且它不是在看孩子）。我不确定您是否应该创建嵌套的 vue 实例，或许可以查看子组件的组件？
可能需要沿着那条路走……轻微的疼痛，但很好

标签： javascript vue.js vuex

【解决方案1】：

根据我在这里看到的情况，您的问题是您正在创建两个 Vue 实例。在实例之间共享数据和方法变得很困难。创建单个实例并使用组件来完成工作要简单得多。部分阅读：http://vuejs.org/guide/components.html

【讨论】：

你会在子实例上使用该组件，还是移除子实例？请记住，这不会是一个 SPA
您将在 Vue 实例上使用该组件。您可以通过 Vue 实例中的“components”属性对象让 Vue 了解该组件。像这样：var vm = new Vue({ el: '.content-container', compontents: { componenteName: 'component-name' } }); 文档非常广泛，是使用 Vue 的重要组成部分。我建议仔细阅读它