vueで親コンポーネントの値を変更する方法

Vue の親コンポーネントの値を変更する方法: 1. 親コンポーネントのメソッドを props を通じて子コンポーネントに渡し、子コンポーネントの props を通じてそれを受け取ります; 2. 「this.」を通じて親をトリガーします。 $emit" コンポーネント メソッドは変更を実装します。 3. "this.$parent" を通じて親コンポーネントの変更を直接トリガーします。

#このチュートリアルの動作環境: Windows 10 システム、Vue バージョン 3、Dell G3 コンピューター。

vue で親コンポーネントの値を変更するにはどうすればよいですか?

Vue neutron コンポーネントによる親コンポーネントのデータの変更

vue は単一のデータ フローであるため、子コンポーネント内で親コンポーネントを直接変更する方法はありません。データについては、プロジェクトが複雑すぎる場合にデータ フローが理解しにくくなるのを防ぐために、Vue は単一のデータ フローを推奨します。 Vue の公式 Web サイトを引用すると、親プロップへの更新は子コンポーネントに下方に流れますが、その逆は起こりません。これにより、子コンポーネントが親コンポーネントの状態を誤って変更して、アプリケーションのデータ フローが理解しにくくなるのを防ぐことができます。したがって、プロジェクト開発プロセス中は、常に子コンポーネントを通じて親コンポーネントのメソッドをトリガーし、親コンポーネントのメソッドを通じて親コンポーネントのデータを変更します。

1. Props の転送メソッド

props を通じて、親コンポーネントのメソッドが子コンポーネントに渡され、子コンポーネントの props を通じて受信され、親コンポーネントを直接トリガーできます。現在のコンポーネントのインスタンスに関するコンポーネントのメソッド。これにより、子コンポーネントは親コンポーネントの値を変更できます。同僚は、子コンポーネントのデータをパラメータの形式で親コンポーネントに送信することもできます。

コードが少ないので、とりあえずすべて表示します。関連するイベントだけを気にする必要があります

//父组件,设置更改自己数据的方法，将该方法传递给子组件
<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. 親コンポーネントのメソッドをトリガーします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 中国語 Web サイトの他の関連記事を参照してください。