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

Question

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

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

这个可以用，但每次我在巢中改变水平时，我都必须改变调用，比如：

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

有办法解决吗？父元素不是 $root 级别的元素，因此不会起作用。 :)

Answer 1

最好为此使用事件，这样您就可以分派 parent 树，然后在它到达时处理它。

这样一来，您的 child 和 parent 在系统中的位置就无关紧要了。

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");

Answer 2

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

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

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

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

尽管如此，我认为您想在这里实际使用过滤器。

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

VueJS1 dynamic $parent.$parent.function length

javascript

vue.js

vue-component