VueJS1 动态 $parent.$parent.function 长度答案

【问题标题】：VueJS1 dynamic $parent.$parent.function lengthVueJS1 动态 $parent.$parent.function 长度
【发布时间】：2016-10-14 15:06:07
【问题描述】：

我正在尝试在多个嵌套子组件中使用父函数

{{ $parent.$parent.testFunction('foo', 'bar') }}

这个是有效的，但是每次我在巢中更改级别时，我都必须更改调用，例如：

{{ $parent.testFunction('foo', 'bar') }}

有没有办法解决这个问题？父级不是 $root 级别的元素，所以这不起作用。 :)

【问题讨论】：

标签： javascript vue.js vue-component

【解决方案1】：

最好为此使用事件，这样您就可以向上调度父树，然后在它到达时对其进行处理。

这样，您的孩子和父母在系统中的位置就无关紧要了。

events: {
    "testFunction": function(foo, bar) {
        // Do Foobar
        return true; // Stops the event from going further
                     // return nothing to have it continue up the chain
    }
}

然后在你的组件中运行

this.$dispatch("testFunction", "Foo", "bar");

【讨论】：

$dispatch 在 Vue 2 中不再存在。
@BillCriswell 指定 VueJS 1 的问题
虽然，看起来 OP 在模板中使用了这些方法，所以不确定事件会有多大帮助？我认为他们应该只是将该方法导入到任何需要它的组件中。（在我看来，它们实际上应该是过滤器）。
这取决于被调用的函数是否需要父级的状态。像这样的通用函数要么需要传递状态，要么不使用状态。
我不得不稍微修改一下，但this.$dispatch("testFunction", ["Foo", "bar"]); 解决了它。谢谢！ :)

【解决方案2】：

我会将testFunction 导入到任何需要个人使用它的组件中。

var doFoo = function () {
  console.log('foo')
}

// Component A
{
  methods: {
    doFoo: doFoo,
  }
}

// Component B
{
  methods: {
    doFoo: doFoo,
  }
}

不过，我认为您实际上希望在这里使用过滤器。

【讨论】：

如果您要进行该设计，我会将其放入 mixin 中，这样它就可以分发给需要它的组件。
是的，我更喜欢它更明确。如果我需要对一堆东西进行分组，我会考虑使用 mixin。