Vueの親コンポーネントと子コンポーネント間で値を転送する方法

この記事では、Vue の親コンポーネントと子コンポーネントの間で値を転送する方法について説明します。困っている人はぜひ参考にしてください。

背景: 最近、vue プロジェクトに取り組んでいます。ページのロジックが比較的複雑で、コードの量が多いため、いくつかのコンポーネントを抽出してコンポーネントに組み込みたいと考えています。そこで問題が生じます。
Vueは子コンポーネントで親コンポーネントの値を変更することを推奨していないので、これをやりたい場合は面倒な手順になります、そして、私はそのような操作が必要なので、情報を確認しました
まず、行きましょう。親コンポーネントのコードと引用 exp -group サブコンポーネント

<exp-group :grpVisible="grpVisible" :grpData="grpData" @updateData="acceptData"></exp-group>

grpVisible と grpData はサブコンポーネントに渡される属性で、1 つは通常の型で、もう 1 つはオブジェクトです

grpVisible: false,
grpData: {app: this.$route.query.app, exp: this.$route.query.exp},

次に、これら 2 つの属性の値をサブコンポーネントで取得し、親コンポーネントに渡します。 まず、子コンポーネントで定義します

props: {
  grpVisible: {
    type: Boolean,
    default: false
  },
  grpData: {
    type: Object
  }
},

まず、通常のタイプの grpVisible 属性を変更する場合は、定義する必要があります。詳細については、コードを参照してください

let demo1 = this.grpVisible
demo1 = true
this.$emit('updateData', demo1) //子组件

Parent コンポーネントは、acceptData

acceptData (value) {
  console.log(value)
}, //父组件

のパラメーター値を通じてこの値を受け取ります。がオブジェクトの場合、Object.assign を使用して新しい値を変数にコピーし、その変数を変更して親コンポーネントに渡す必要があります。コードは次のとおりです。

let demo1 = Object.assign({}, this.grpData)
demo1.app = 'binge'
this.$emit('updateData', demo1)

関連推奨:

その方法。 vue ツリー コントロールの z-tree を使用してデータを動的に追加します

JavaScript は画像の切り替えを実現するために DOM をどのように使用しますか?

以上がVueの親コンポーネントと子コンポーネント間で値を転送する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。