question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

support cloneNode method to update child props

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:17
  • Comments:11 (1 by maintainers)

github_iconTop GitHub Comments

12reactions
yyx990803commented, Aug 9, 2016

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.

0reactions
k644606347commented, Dec 21, 2021

这个问题有什么答案吗

Read more comments on GitHub >

github_iconTop Results From Across the Web

Passing props to props.children using React.cloneElement ...
You can't change the props. children directly, but you can clone them and change them in the process. This solution is quite simple...
Read more >
React.js - How to update properties/props/state of dynamic ...
You can map all children, clone every one with React.cloneElement(child, {props}) (react clone element) and after that set new props.
Read more >
Using the React.cloneElement() function to clone elements
In this in-depth tutorial, learn how to clone and manipulate elements three different ways using the React.cloneElement function.
Read more >
How to pass data to a React component's props.children
But you can clone them — and merge in updated props in the process. To clone an element, you'll need to use React's...
Read more >
Maintaining ref prop through React.cloneElement() #8873
cloneElement() will allow for two parents to maintain ref props to the same child. I've tried to replicate this behaviour in a CodePen,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found