Code Here + Fiddle
I'm trying to communicate data from a child vue to parent vue.
The parent app.vue registers on events:
created: function () {
this.$on('nickname-selected', function (params) {
console.log('nickname-selected event fired, params= ' + params)
})
console.log('app.vue registered on nickname-selected events')
}
The child home.vue fires an event
login: function () {
...
this.$emit('nickname-selected', this.nickname)
console.log('home emitted nickname-selected event')
But the event isn't picked up by the parent.
app.vue registered on nickname-selected events
home emitted nickname-selected event
Related
I want to execute setInterval in the child component from the parent component. When I do console.log in start it appears in the console, however the interval doesn't start. If I call the method in child component, then it works.
Child methods:
stop() {
clearInterval(this.t);
},
start() {
this.timer = setInterval(() => {this.call()}, 1000);
}
Parent method:
methods: {
update() {
this.$refs.childComponent.start();
},
}
Do not use arrow function in setInterval, it won't clear. You can do like this
example
I have a parent component that once mounted() makes and ajax call updates some of it's DOM and passes some data to one of it's child components, all the data from the ajax response.
The child also has a ajax call on mounted() and it sends along the prop it receives from the parent,
The problem is that that the child component fires the ajax call before the parent, how can mount the child after the parent gets the data from ajax ?
Use a v-if in the parent to delay the rendering of the child until the data is ready:
Parent
<child v-if="parentData" :prop="parentData"></child>
data() {
return {
parentData: null
}
},
async mounted() {
const response = await axios.get(...);
this.parentData = response.data;
}
I have parent component with three child component in Vuetify model tabs. Event bus is initiate when model is close.
Logic just want to empty component arrays when model is closed...
But not single bus initiated...Solution?
Code is here!
Parent Code...
methods:
{
dialog()
{
bus.$emit('clearchild1');
bus.$emit('clearchild2');
bus.$emit('clearchild3');
}
}
Child 1 Code...
mounted()
{
bus.$on('clearchild1', () => {
console.log("clearchild1...data clear successfully....");
});
},
Child 2 Code...
mounted()
{
bus.$on('clearchild2', () => {
console.log("clearchild2...data clear successfully....");
});
},
Child 3 Code...
mounted()
{
bus.$on('clearchild3', () => {
console.log("clearchild3...data clear successfully....");
});
},
i think you have to move the bus.$on from mounted() hook, to the created() hook, this should solve your problem
I am not sure how you have declared you're bus,
but this might help,
instead of bus you can directly use this.$root
// Child Listener
this.$root.$on('clearchild1', () => {
console.log("clearchild1...data clear successfully....");
});
// Parent Emitter
this.$root.$emit('clearchild1');
make sure you destroy listener in child component
beforeDestroy() {
this.$root.$off('clearchild1');
}
In the compoent ,when call $emit('callback', params) finished, I need the returned value. Someone can help?
vueComponent:
methods: {
test: function () {
if(this.$emit('cb', param1)){
// this not working
console.log('return true')
}else{
console.log('return false')
}
}
}
vueRoot:
methods: {
cb: function () {
return true;
}
}
As per my comment below the original question, $emit only tells the parent component that an event has occurred and allows it to do something in response to the event and any data sent with it. The child component has no way of knowing what the results of the parent's actions are. In order to tell the child component something after the callback finishes, you will need to send that value through a prop and have the child watch for any changes to the prop's value.
In my App, store gets updated whenever an event is dispatched. But the problem is I have a child component.
Store:
state.name = 'Jack'; //initial state value
Child Component:
this.props.updateName('Micheal');
this.printName();
printName() {
console.log(this.props.name); // 'Jack'
}
After a while I call the same function.
this.printName(); // 'Micheal'
My question is that, is there any way to callback a function in child component when store is updated?
The child component gets the new state via props. So, the componentWillReceiveProps will do the trick.
componentWillReceiveProps(nextProps) {
if (nextProps.name !== this.props.name) {
console.log(this.props.name, nextProps.name);
}
}