How to modify the parent component value in vue

Vue's method of modifying the value of the parent component: 1. Pass the parent component's method to the child component through props, and receive it through props in the child component; 2. Trigger the parent through "this.$emit" The component method implements the modification; 3. Directly trigger the modification of the parent component through "this.$parent".

#The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

How to modify the parent component value in vue?

Vue neutron component changes parent component data

Because vue is a single data flow, there is no way to modify the parent component directly in the child component For data, Vue advocates a single data flow to prevent the data flow from being difficult to understand when the project is too complex. To quote Vue's official website: Updates to parent props will flow downward to child components, but not vice versa. This will prevent the child component from accidentally changing the state of the parent component, making the data flow of your application difficult to understand. Therefore, during the project development process, we always trigger the methods in the parent component through the child components, and change the data of the parent component through the methods of the parent component.

1. Props transfer method

Through props, the method of the parent component is passed to the child component, and is received through props in the child component. The parent component can be directly triggered on the instance of the current component. The method of the component, so that the child component can change the value of the parent component. Colleagues can also send the data of the child component to the parent component in the form of parameters.

Since there is not much code, I will display it all for now. You only need to care about the relevant events

//父组件,设置更改自己数据的方法，将该方法传递给子组件
<template>
  <div>
    <h1>我是父组件</h1>
    <HelloWorld :msg="msg" :changeMsg="changeMsg"/>
  </div>
</template>
 
<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
 
export default {
  name: &#39;Home&#39;,
  components: {
    HelloWorld
  },
  methods:{
    changeMsg(text,num){
      console.log(text,num);
      this.msg=this.msg+1
    }
  },
  data(){
    return{
      msg:1
    }
  }
}
</script>
 
 
 
//子组件，接收父组件传递过来的方法，通过props接收到的方法和数据，在组件实例上可以直接获取和触发
<template>
  <div>
    <h1>我是子组件<button @click="changeFatherData">点我更改父组件数据</button></h1>
    <h1>父组件数据：{{msg}}</h1>
    
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  props: {
    msg: Number,
    changeMsg:Function
  },
  data(){
    return{
      text:"我是子组件数据，我要发送给父组件",
      num:12
    }
  },
  methods:{
    changeFatherData(){
      this.changeMsg(this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

2. Trigger the parent component method through this.$emit

Customize a method in the parent component and then pass it to the child component. The child component directly triggers the data in the parent component through this.$emit to realize parent-child component communication. The child component triggers the event and the parent component listens for the event.

//父组件，将定义的方法传递给子元素
<template>
  <div>
    <h1>我是父组件</h1>
    <HelloWorld :msg="msg" @changeMsg="changeMsg"/>
  </div>
</template>
 
<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
 
export default {
  name: &#39;Home&#39;,
  components: {
    HelloWorld
  },
  methods:{
    changeMsg(text,num){
      console.log(text,num);
      this.msg=this.msg+1
    }
  },
  data(){
    return{
      msg:1
    }
  }
}
</script>
 
 
//子组件，通过this.$emit触发父组件方法，更改父组件数据，同时可以进行数据传值
<template>
  <div>
    <h1>我是子组件<button @click="changeFatherData">点我更改父组件数据</button></h1>
    <h1>父组件数据：{{msg}}</h1>
    
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  props: {
    msg: Number,
  },
  data(){
    return{
      text:"我是子组件数据，我要发送给父组件",
      num:12
    }
  },
  methods:{
    changeFatherData(){
      this.$emit(&#39;changeMsg&#39;,this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

3. The child component directly triggers the parent component through this.$parent (the code is concise, recommended)

The child component directly triggers the parent component event, without the need for method transmission, reception, and Definition of event.

//父组件，声明需要的方法
<template>
  <div>
    <h1>我是父组件</h1>
    <HelloWorld :msg="msg"/>
  </div>
</template>
 
<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
 
export default {
  name: &#39;Home&#39;,
  components: {
    HelloWorld
  },
  methods:{
    changeMsg(text,num){
      console.log(text,num);
      this.msg=this.msg+1
    }
  },
  data(){
    return{
      msg:1
    }
  }
}
</script>
 
 
//子组件，this.$parent直接触发父组件方法
<template>
  <div>
    <h1>我是子组件<button @click="changeFatherData">点我更改父组件数据</button></h1>
    <h1>父组件数据：{{msg}}</h1>
    
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  props: {
    msg: Number,
  },
  data(){
    return{
      text:"我是子组件数据，我要发送给父组件",
      num:12
    }
  },
  methods:{
    changeFatherData(){
      this.$parent.changeMsg(this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

Recommended learning: "vue.js video tutorial"

The above is the detailed content of How to modify the parent component value in vue. For more information, please follow other related articles on the PHP Chinese website!