The vue parent component notifies the child component to update. Can I listen for data changes?
problem description
I currently have a parent component, which has more than 20 child components A1, a2, and so on, and I want them to update their balances. What"s the best way to deal with it.
the environmental background of the problems and what methods you have tried
originally intended to pass parameters through the component, and then listen for data changes to update the balance. But there is no function that triggers listening.
although there is another way to implement it, it is too troublesome to register more than 20 components and determine the way the current route invokes subcomponents.
related codes
parent component:
//
<router-view :amount="amount" />
//
this.amount = Math.random()
Sub-component:
//props
props: ["amount"]
//
watch:{
amount(val,oldval){
console.log(111);//
}
}
what result do you expect? What is the error message actually seen?
want to update the balance, I don"t know what"s wrong with my above code.
you need to update the balance of more than 20 components, indicating that the balance is a common data, especially for multi-component communication issues, it is recommended to use vuex.
vuex is the centralized management of changes in the data that drives the component through state (data source). Solve the problem of interaction between many components and Synchronize data;
the state at the application level is concentrated in store; the way to change the state is to submit mutations, which is a Synchronize thing; asynchronous logic should be encapsulated in action.
state
Vuex uses a single state tree, that is, each application will contain only one instance of store, but there is no conflict between a single state tree and modularity. The state of the stored data cannot be modified directly. The method defined by
mutations
mutations dynamically modifies the state or data in the store of Vuex.
getters
similar to vue calculation attributes, mainly used for Filter some data.
action
actions can be understood as a method of asynchronously manipulating data by changing the method of data in mutations into a method of processing data asynchronously. The view layer distributes action through store.dispath.
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.countPP
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
When the
project is particularly complex, each module can have its own state, mutation, action, getters, to make the structure very clear and easy to manage.
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
})
suggest to adopt my answer, thank you!
router-view itself is a component, so passing parameters like this is tantamount to passing parameters to router-view, not a component of your child routing page. Several ideas: 1. Take a look at Vuex, 's very simple, multi-component data sharing preferred, responsive.
2.eventBus
3. Consider whether the common part can be implemented in the parent component of router-view (for example, all headers of the same site usually use the same component, and access child routes do not need to be re-rendered), which is very efficient if possible.
does your component call router-view?
open the same route?
has a .sync function
https://www.jianshu.com/p/6b0.
you assign the value passed by props in data and then listen to
so many components need to update data. Just use vuex and register vuex globally
