I am using a component with tabs inside. In the Head component(parent):
<v-btn @click="setSelectedTab('Set') "> ...
<component :is="selectedTab"></component>
In the Set component(child component), I use some emits that will change the data.
<div>
<head-set
v-show="showHeadSet"
@settings="
showHeadSet = false;
showScreenSettings = true;
"
@robotix="
showHeadSet = false;
showRobotix = true;
"
>
</head-set>
<Robotix v-show="showRobotix"></Robotix>
<screen-settings v-show="showScreenSettings"></screen-settings>
</div>
<script>
data() {
return {
showHeadSet: true,
showRobotix: false,
showScreenSettings: false,
};
},
</script>
When the button is pressed (@click="setSelectedTab('Set') "), I want the data in the Set(child component) to return as in the beginning(showHeadSet: true,showRobotix: false,showScreenSettings: false,).
Do you know how to do that?
The easiest way to pass data to your child components in your case would be to use properties.
Your parent component would looks something like this:
<template>
<div>
<v-btn @click="setSelectedTab('Set') "> ... </v-btn>
<component :is="selectedTab" :settings="yourSettings"></component>
</div>
</template>
<script>
export default {
data: () => {
yourSettings: {
showHeadSet: true,
showRobotix: false,
showScreenSettings: false
}
},
methods: {
setSelectedTab() {
// your code
this.yourSettings = {
showHeadSet: true,
showRobotix: false,
showScreenSettings: false
}
}
}
}
</script>
In your child components you'll have to add the props definition like this
<script>
export default {
props: {
settings: {
type: Object,
required: true
}
}
}
</script>
You can use the props like computed or data variables and overwrite the settings as you need them to be. In the setSelectedTab method of the parent component you just overwrite the data back to the defaults.
You can check the docs on more info about props.