Component to update parent data

[nfplee]

Is there a way to have a component update the parent data? Here's a JSFiddle I've put together:

https://jsfiddle.net/v1q6tu4k/

Notice how you can pass the data down fine but when you click the button inside the component it doesn't set the date at the top. I understand why as it's bound to a difference reference.

I tried doing the following to update the initial props:

https://jsfiddle.net/v1q6tu4k/1/

and the following which tries to pass the parent date into the setDate function:

https://jsfiddle.net/v1q6tu4k/2/

However neither of these work. Ideally I'd like to pass this down via v-model and emit any changes up like https://v3.vuejs.org/guide/component-basics.html#using-v-model-on-components.

[nooooooom]

Here may be able to answer your doubts about why this problem occurs. First of all, we must make it clear that there is no parent-child component in petite-vue. All components are just a node with a private context, and the context of the parent node can be used (referenced or changed) at will.

If you really need to change the value of the parent (the context), and you want to monitor the change in a controllable/observable way，I thought about the way for your reference:
You can provide the update function to the sub-component and modify it inside the sub-component.
Or write a directive similar to $emit by customizing the directive .
Or use Global State Management to change data through dispatch action.

[nfplee]

Thanks. The $emit idea sounds promising but I have no idea how to implement it. The other ideas seem more of a hack but I'm willing to be proven otherwise.

My objective is for the component to be unaware of the parent/global context. Here's an idea I quite like where the component dispatches the update event and then it can be subscribed to by any parent element:

• https://jsfiddle.net/qwtg617L/
• https://jsfiddle.net/qwtg617L/1/
• https://jsfiddle.net/qwtg617L/2/

[nooooooom]

This is a great practice! but it also has a small bug~

The reason is that we noticed that at present, the change of the parent context does not change the definition of the current context, which means that the child's reference to the parent context is actually a static reference (unless it is an object type ). In other words, although we modify the value of the parent context by dispatching events at the child level, when we modify the value of the context at the parent, the update of the child components cannot be triggered because they are not reactive. This is related to the mechanism that petite-vue resolves v-scoped.

One way is to enhance the reference of props, allowing me to quote your code
https://jsfiddle.net/nooooooom/fsk7bm6j/7/