Question

我有一个包含多个孩子的父组件＆＃39; child＆＃39;。我希望父级基本上具有与vanilla标记相同的模板，这就是我使用render函数的原因。

我希望父级管理哪个子级处于活动状态。但道具似乎并没有传给孩子们。

我已尝试应用 documentation says ，但在子项上未定义道具。但是，如果我item.data.staticClass = 'testing-class';该课程适用于每个孩子。

Vue.component('parent', {
  data: function() {
    return {
      activeIndex: 0
    }
  },
  render: function(createElement) {
    this.$options._renderChildren.forEach(function(item, index) {
      if (item.data === undefined) //whitespace?
      return; 

      item.data.props = {
        activeindex: this.activeIndex,
        index: index
      }
    }.bind(this));

    return createElement('div', {}, this.$options._renderChildren);
  }
});

Vue.component('child', {
  template: '<div>Im a child</div>',
  props: ['activeindex', 'index'],
  mounted: function() {
    console.log(this.$props); //undefined
  }
});

new Vue({
  el: '#app'
});

JSFIDDLE DEMO

Answer 1

首先，我认为this.$props总是未定义的。可以在$props这样的模板中访问{{ $props }}属性，但这些内联属性（令人沮丧）并不总是直接映射到组件中可用的this变量＆＃39}。 s脚本。您可以使用this.$options.propsData查看组件的道具值。

其次，您可以使用item.componentOptions.propsData设置子组件的属性值。（我认为item.data.props是一个用词不当引用别的东西）。 Here's a fiddle with the change.

VueJS在渲染函数调用中将子句传递给子节点

1 个答案: