vue에서 상위 구성 요소 값을 수정하는 방법

상위 구성 요소의 값을 수정하는 Vue 메소드: 1. props를 통해 상위 구성 요소의 메소드를 하위 구성 요소에 전달하고 하위 구성 요소의 props를 통해 이를 수신합니다. 2. "this.$emit"을 통해 상위 구성 요소 메소드를 트리거합니다. 3. "this.$parent"를 통해 상위 구성 요소의 수정을 직접 트리거합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, Vue 버전 3, Dell G3 컴퓨터.

vue에서 상위 구성 요소 값을 수정하는 방법은 무엇입니까?

vue 하위 구성 요소는 상위 구성 요소 데이터를 변경합니다

vue는 단일 항목 데이터 흐름이므로 하위 구성 요소에서 직접 상위 구성 요소의 데이터를 수정할 수 있는 방법이 없습니다. 단일 항목 데이터 흐름을 옹호합니다. 프로젝트가 너무 복잡해져서 데이터 흐름을 이해하기 어렵게 만드는 것을 방지합니다. Vue의 공식 웹사이트를 인용하자면: 상위 props에 대한 업데이트는 하위 구성요소로 아래로 흐르지만 그 반대는 아닙니다. 이렇게 하면 하위 구성 요소가 실수로 상위 구성 요소의 상태를 변경하여 애플리케이션의 데이터 흐름을 이해하기 어렵게 만드는 것을 방지할 수 있습니다. 따라서 프로젝트 개발 과정에서 우리는 항상 하위 구성 요소를 통해 상위 구성 요소의 메서드를 트리거하고 상위 구성 요소의 메서드를 통해 상위 구성 요소의 데이터를 변경합니다.

1. Props 전송 방식

Props를 통해 상위 컴포넌트의 메소드를 하위 컴포넌트에 전달하고, 하위 컴포넌트의 Prop을 통해 전달받으면 현재 컴포넌트의 인스턴스에서 상위 컴포넌트의 메소드를 직접 트리거할 수 있습니다. , 이를 통해 하위 구성요소를 구현합니다. 상위 구성요소의 값을 변경합니다. 동료는 하위 구성 요소의 데이터를 매개 변수 형식으로 상위 구성 요소에 보낼 수도 있습니다.

코드가 많지 않으니 일단은 다 보여드리겠습니다. 관련 이벤트만 신경쓰시면 됩니다

//父组件,设置更改自己数据的方法，将该方法传递给子组件
<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>

둘째, this를 통해 상위 컴포넌트 메소드를 트리거합니다.$emit

상위 구성요소를 하위 구성요소에 전달하면 하위 구성요소는 this.$emit을 통해 상위 구성요소의 데이터를 직접 트리거하여 상위-하위 구성요소 통신을 실현합니다. 하위 구성 요소는 이벤트를 트리거하고 상위 구성 요소는 이벤트를 수신합니다.

//父组件，将定义的方法传递给子元素
<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. 자식 컴포넌트는 this.$parent를 통해 부모 컴포넌트를 직접 트리거합니다. (코드는 간결합니다. 권장)

메서드 전송, 수신, 이벤트 정의가 필요 없이 자식 컴포넌트가 부모 컴포넌트 이벤트를 직접 트리거합니다. .

//父组件，声明需要的方法
<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>

추천 학습: "vue.js 비디오 튜토리얼"

위 내용은 vue에서 상위 구성 요소 값을 수정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!