There appears to be no responsive data in the component's props

[dongwa]

In the sample code below, data changes in the store do not cause data changes in the Component，Is this a bug or am I using the wrong method？
https://codepen.io/dongwa/pen/XWeKRBN
The problem I raised is that the props of the component does not have responsive data
https://codepen.io/dongwa/pen/jOGrdYj

[salomoneb]

[dongwa]

Thank you for your reply, but this is not the answer I want .In your code, you do not use the props of the component. The problem I raised is that the props of the component does not have responsive data
https://codepen.io/dongwa/pen/jOGrdYj

[ghost]

I Thinks this is because v-scope is making the props work only inside of the template or component, because the props are reactive in the components scope.

Just Try to use reactive like these const count = reactive({ value: 0, increment: this.value++ }) and use count.value inside of your components and increment count.increment to increment the count.

Just visit my github & see how iimplement this one. https://github.com/amancoder28/petite-vue-counter

[dongwa]

I think it is unreasonable that such components can only be coupled to the main program and can't be separated and used in multiple HTML.
In addition, this does not solve the example one,When you want to render components using v-for, you have to use props
https://codepen.io/dongwa/pen/jOGrdYj

[Fry98]

Yes, when you pass in a primitive value as a prop, it will indeed not be reactive. You are supposed to be passing the initial state of a component, not a reactive one. Note however that if you changed the counter property to be an object, it would actually remain reactive in the child component (code: https://codepen.io/fry98/pen/ExwZPyQ).

This behavior is not a bug but one way to work around it is to pass reactive props as lambda functions for which you can set up getters inside the child component (example: https://codepen.io/fry98/pen/JjrEGbB).

Be aware that this is pretty much always unnecessary though because both the parent's state and your reactive() store are accessible from within the child. In my example, I could've just used count instead of innerCount in the template and then I wouldn't even have to pass any props. Even in your v-for example you can just pass in the index and then use that to access the array directly in your global store.

Edit: In the v-for case, you don't actually need to pass the index as a prop. Both the value and the index are also accessible from the child component by default.

[dongwa]

Thank you for your solution, it's a good plan to solve my question.So, using a unified store rather than component's props was a unique design concept for petite-vue?

[Fry98]

It's important to note that what we both have been calling "components" aren't really components. The main inspiration for petite-vue was Alpine.js and so using v-scope is a lot closer to the concept of scopes in Alpine (ref: https://alpinejs.dev/directives/data#scope) than it is to regular Vue components with full encapsulation. The mental model for those is quite different so it's better not to view petite-vue just as a smaller version of Vue but really it's own thing with a different set of fundamental rules. For example, Alpine doesn't even allow you to specify template for your scope and you probably don't need to use it in petite-vue either except for very specific use-cases. v-scope is mostly meant for containing data, not HTML, and you should view your whole page (or at least the block controlled by petite-vue) as one big interconnected thing instead of a bunch of separate isolated components.

[dongwa]

Thank you for your answer, I harvest a lot