Vue: support cloneNode method to update child props

Created on 9 Aug 2016 · 10Comments · Source: vuejs/vue

support `cloneNode` method to update child props

For parent-child communication， Vue 1.x has vm.$dispatch method , but in Vue 2.0, it is deprecated. And I also don't think dispatch can solve problem. In 2.0 changes, It shows we can use 'EventEmitter' or Vuex. The recommend way is to use Vuex, but if it is a ui comonent, it's independent and unnecessary to use Vuex. And EventEmitter will fire listeners on every component which register the event.So when I want to fire event only on children, it becomes difficult.
In Vue 2.0, I can use render function, and I want to update child node props.Now I modify the node.componentOption to update props. But I think it's a bad way to do this thing.So if there is a cloneNode method like cloneElement in React, it will be very useful.

For example, I have two components CheckboxGroup and Checkbox.
components.vue:

<checkbox-group :value="1">
    <checkbox :value="1">1</checkbox>
    <checkbox :value="2">2</checkbox>
</checkbox-group>

CheckboxGroup.vue without cloneNode:

export default Vue.extend({
  props: {
    value: prop.types(Array).isRequired(true)
  },
  render (h) {
    let value = this.value
    let children = this.$slots['default'].map((node) => {
      let props = node.componentOptions.propsData
      props.checked = value.indexOf(props.value) !== -1
      return node
    })
    return (<div>{children}</div>)
  }
})

And with cloneNode, the render function can be:

  render (h) {
    let value = this.value
    let children = this.$slots['default'].map((node) => {
         return cloneNode(node, {
              checked: value.indexOf(props.value) !== -1
         })
    })
    return (<div>{children}</div>)
  }

And the cloneNode method can also support listeners/attrs/domProps..., it will be very convenient and avoid to going deep into vnode's structure for users.

Source

carrytao

👍9 ❤4 🚀2

All 10 comments

I agree this could be useful, however, this is probably better suited as an optional helper package. We will likely have a package that includes some common vnode helpers included, but shipping them all by default could be a waste when the majority of users will still be using templates.