ご存知のとおり、vue は一方向のデータ フローであり、次のように子コンポーネントは親コンポーネントの変数を直接変更できません:
parent.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <template>
<p>
<p>parent:{{ msg }}</p>
<children :msg= "msg" ></children>
</p>
</template>
<script>
import children from '@/components/children'
export default {
name: 'parent',
data() {
return {
msg: 'from parent'
}
},
components: {
children
}
}
</script>
|
ログイン後にコピー
Children.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <template>
<p>
<p>children:{{ msg }}</p>
<p>
<button @click='changeChild'>点击改变children的msg</button>
</p>
</p>
</template>
<script>
export default {
name: 'children',
data () {
return {
}
},
props: ['msg'],
methods: {
changeChild() {
this.msg = 'from children'
}
}
}
</script>
|
ログイン後にコピー
ページは次のとおりです:

クリック後:

上記は、データを渡す最も基本的な親です。子コンポーネントによる変数の変更は親コンポーネントには影響しません。では、親コンポーネントと子コンポーネントを同期したい場合はどうすればよいでしょうか。現時点では、this.$emit() 関数を使用する必要があります。
#最初のタイプ: v-model transfer
親コンポーネントの変更:
1 2 3 4 5 6 | <template>
<p>
<p>parent:{{ msg }}</p>
<children v-model= "msg" ></children>
</p>
</template>
|
ログイン後にコピー
サブコンポーネントの変更:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script>
export default {
name: 'children',
data () {
return {
}
},
model: {
prop: "msg"
},
props: ['msg'],
methods: {
changeChild() {
this. $emit ('input', "child" )
}
}
}
</script>
|
ログイン後にコピー
注: モデル部分は省略できません。this.$emit() によってトリガーされるイベントが入力されます (戻りイベントが親コンポーネントに明示的にバインドされていない場合は、入力します)はデフォルトです)、渡される値は次のように child
ページです:

クリック後:

親の値が表示されることがわかります。
2 番目のタイプ: 応答イベント (@) を明示的に指定します。
# 親コンポーネントの変更:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <template>
<p>
<p>parent:{{ msg }}</p>
<children @upChange= "changeMsg" :msg= "msg" ></children>
</p>
</template>
<script>
import children from '@/components/children'
export default {
name: 'parent',
data() {
return {
msg: 'from parent'
}
},
components: {
children
},
methods: {
changeMsg() {
this.msg = "收到子组件信号,嘤嘤嘤"
}
}
}
</script>
|
ログイン後にコピー
子コンポーネントの変更:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script>
export default {
name: 'children',
data () {
return {
}
},
model: {
prop: "msg"
},
props: ['msg'],
methods: {
changeChild() {
this. $emit ('upChange', "给你一个value" )
this.msg = 'from children'
}
}
}
</script>
|
ログイン後にコピー
ここでは、発行後の msg の値を意図的に変更しました。これは不可能であることがわかったので、発行は次のとおりだと思います。キューの最後に実行される非同期関数。これは、値がここで「子から割り当てられる」ことを意味し、最終的には上書きされます。
this.$emit() の 2 番目のパラメータは親コンポーネントに値を渡すことができるので、これは非常に便利です。
このページは次のとおりです:

クリック後:


#どちらの方法も基本的には期待どおりの結果を達成できます。特定の状況に応じて使用できます。父親と息子の間のコミュニケーションについて話した後、子と子のコンポーネント間でコミュニケーションを行うのは自然なことです。実際、あなたは賢いので、その方法を理解しているはずです。そう、親コンポーネントを踏み台にして、子コンポーネントがコミュニケーション効果を発揮できるようにするのです。
これは小さな例です:
親コンポーネント:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <template>
<p>
<children @upChange= "changeMsg" :msg= "msg" ></children>
<children2 :msg2= "msg2" ></children2>
</p>
</template>
<script>
import children from '@/components/children'
import children2 from '@/components/children2'
export default {
name: 'parent',
data() {
return {
msg: 'from parent',
msg2: 'from parent'
}
},
components: {
children,
children2
},
methods: {
changeMsg(value) {
this.msg = value
this.changeChild2()
},
changeChild2() {
this.msg2 = "children2收到 children2收到 over over!"
}
}
}
</script>
|
ログイン後にコピー
サブコンポーネント 1:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <template>
<p>
<p>children:{{ msg }}</p>
<p>
<button @click='changeChild'>点击呼叫children2</button>
</p>
</p>
</template>
<script>
export default {
name: 'children',
data () {
return {
}
},
model: {
prop: "msg"
},
props: ['msg'],
methods: {
changeChild() {
this. $emit ('upChange', "children2,children2,收到请回答,收到请回答" )
}
}
}
</script>
|
ログイン後にコピー
サブコンポーネント 2:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <strong><template>
<p>
<p>children2: {{ msg2 }}</p>
</p>
</template>
<script>
export default {
name: 'children2',
data () {
return {
}
},
props: ['msg2']
}
</script></strong>
|
ログイン後にコピー
ページは次のとおりです:
この記事では、vue のデータバインディング方法について詳しく説明していますので、関連する内容をご覧ください。 PHP中国語ウェブサイトへ。 
関連する推奨事項:
単純な PHP MySQL ページング クラス
再帰を使用しない 2 つのツリー配列コンストラクター
HTMLをExcelに変換し、印刷・ダウンロード機能を実現
以上がvueのデータバインディング方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。