[Vuejs]-How to change the data value of the parent file from the sub file in vue.js?

you can pass a function as an attribute to the child component

<app-header :changeParentStatus="changeStatus"></app-header>

parent
callback

<script>
  import AppHeader from "./components/Header.vue";
  export default {
   data(){
     return{
       active: true
     }
   },
   methods:{
       changeStatus(active){
           this.active=active
       }
   },
   components:{
      appHeader: AppHeader
   }
  }
 </script>

now call “changeParentStatus” from child change function

<script>
   export default{
    props:["changeParentStatus"],
    methods:{
       change() {
            this.active = !this.active
            console.log(this.active)
            this.changeParentStatus(this.active);
        }

    }
   }
 </script>

Looks like you want to pass the checkbox value from child to parent. For this define event on parent component and emit that event from child component.

In Parent handle event like this:

<router-view @changeParentStatus="changeStatus"></router-view>

The ChangeStatus is event/method so we defined using v-on: (or @shorthand)

Next, emit event from child component:

 <label>
    <input type="checkbox" 
       @click="$emit('changeParentStatus', $event.target.checked)">
 customizer</label>

More info: Vue.JS Guide