Does vuejs render function allow adopting an existing nested VNode of slot

user_1828726 0
Viewed 27

I am new to vuejs render function, and doubt: can a VNode re-adopted, e.g. VNode nested under a slot is moved to another VNode like following case (just for demonstration purpose, not same as this version):

The following code

<row cols="4,8">
   <ui-text name="A" />
   <ui-text name="B" />
</row>

is expected to generate same result as:

<b-form-row>
   <b-col cols="4">
      <ui-text name="A" />
   </b-col>
   <b-col cols="8">
      <ui-text name="B" />
   </b-col>
</b-form-row>

This is my code, the final output is not exact same as expected after verified in vuejs-devtools view, but the HTML code is similar to expected result.

enter image description here

structure shown in vuejs-devtools, you can find 2 UiText nodes are not child of BCol nodes respectively and 2 BCol nodes are marked as functional, and I don't know what the "functional" is, I am not sure how to fix this inconsistence, my code just try to let a new created VNode adopts an existing VNode, I am not sure if or not $parent of the UiText is immutable, is this correct solution?

enter image description here

export default {
  props: ['cols'],
  computed: {
    columns() {
      let v = this.cols;
      if (!v)
        return [];
      let values = this.cols.split(/,/g);
      return values;
    }
  },
  render: function(h) {
    let columns = this.columns;
    let children = this.$slots.default ? this.$slots.default : new Array();
    let kids = new Array();
    for(let i = 0, s = Math.min(columns.length, children.length); i < s; i++) {
      let kid = children[i];
      let node = h('b-col', {props: {cols: columns[i]}}, [ kid ]);
      kids.push(node);
    }
    return h('b-form-row', {}, kids);
  }
}
vuejs2
1 Answers

I misunderstood something, the functional component just works like that, so there is no problems.

This is updated version, it is also a functional component.

<script>

export default {
  functional: true,
  props: ['cols'],
  render: function(h, ctx) {
    let columns = (ctx.props.cols  || '').split(/,/g);
    let children = ctx.children || new Array();
    let kids = new Array();
    for(let i = 0, s = Math.min(columns.length, children.length); i < s; i++) {
      let node = h('b-col', {props: {cols: columns[i]}}, [ children[i] ]);
      kids.push(node);
    }
    return h('b-form-row', {}, kids);
  }
}

</script>
user_18287260
Related