ご存知のとおり、vue は一方向のデータ フローであり、次のように子コンポーネントは親コンポーネントの変数を直接変更できません:
parent.vue
<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
<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
親コンポーネントの変更:
<template>
<p>
<p>parent:{{ msg }}</p>
<children v-model="msg"></children>
</p>
</template>ログイン後にコピー
サブコンポーネントの変更:
<script>
export default {
name: 'children',
data () {
return {
}
},
model: {
prop: "msg"
},
props: ['msg'],
methods: {
changeChild() {
this.$emit('input', "child")
}
}
}
</script>ログイン後にコピー
注: モデル部分は省略できません。this.$emit() によってトリガーされるイベントが入力されます (戻りイベントが親コンポーネントに明示的にバインドされていない場合は、入力します)はデフォルトです)、渡される値は次のように child
ページです:
クリック後:
親の値が表示されることがわかります。
2 番目のタイプ: 応答イベント (@) を明示的に指定します。
# 親コンポーネントの変更:
<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>ログイン後にコピー
子コンポーネントの変更:
<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 番目のパラメータは親コンポーネントに値を渡すことができるので、これは非常に便利です。
このページは次のとおりです:
クリック後:
#どちらの方法も基本的には期待どおりの結果を達成できます。特定の状況に応じて使用できます。父親と息子の間のコミュニケーションについて話した後、子と子のコンポーネント間でコミュニケーションを行うのは自然なことです。実際、あなたは賢いので、その方法を理解しているはずです。そう、親コンポーネントを踏み台にして、子コンポーネントがコミュニケーション効果を発揮できるようにするのです。
これは小さな例です:
親コンポーネント:
<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: <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:
<template>
<p>
<p>children2: {{ msg2 }}</p>
</p>
</template>
<script>
export default {
name: 'children2',
data () {
return {
}
},
props: ['msg2']
}
</script>ログイン後にコピー
この記事では、vue のデータバインディング方法について詳しく説明していますので、関連する内容をご覧ください。 PHP中国語ウェブサイトへ。 
関連する推奨事項:
単純な PHP MySQL ページング クラス
再帰を使用しない 2 つのツリー配列コンストラクター
HTMLをExcelに変換し、印刷・ダウンロード機能を実現
以上がvueのデータバインディング方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
