ホームページ >バックエンド開発 >PHPチュートリアル >vueのデータバインディング方法を詳しく解説
ご存知のとおり、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>
<template>
<p>
<p>children2: {{ msg2 }}</p>
</p>
</template>
<script>
export default {
name: 'children2',
data () {
return {
}
},
props: ['msg2']
}
</script>
この記事では、vue のデータバインディング方法について詳しく説明していますので、関連する内容をご覧ください。 PHP中国語ウェブサイトへ。 関連する推奨事項:
以上がvueのデータバインディング方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。