Vue で親コンポーネントと子コンポーネントの間で通信するにはどうすればよいですか?以下の記事では、父から息子、息子から父への方法を紹介していますので、ぜひ参考にしてください。

#1. 親コンポーネントを子コンポーネントに渡す
⭐⭐
##親コンポーネントは、props 属性を通じて子コンポーネントに渡されます。[関連する推奨事項: - vuejs ビデオ チュートリアル、Web フロントエンド開発]
子コンポーネントコンポーネントが親コンポーネントに渡される: $emit を通じてイベントをトリガーする; -
## ここで、親コンポーネントに子によって表示する必要があるデータがあることがわかります。コンポーネントの場合、
props
コンポーネント間の通信を完了するには
プロパティを介してコンポーネント間の通信を完了するには


##2. Props についての簡単な説明
⭐⭐ では、
Props
とは何ですか? ?
関数: 親コンポーネントによって渡されたプロパティを受け入れます
- Props
は、コンポーネントにいくつかのカスタム属性を登録できることを意味します;-
親コンポーネントはこれらの属性 (属性) に値を割り当て、子コンポーネントは属性の名前を通じて対応する値を取得します;
- 単一ファイル コンポーネントでは
スクリプト セットアップ#を使用します##,
props
defineProps()
マクロを使用して次を宣言できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><script>
const props = defineProps([&#39;foo&#39;])
console.log(props.foo)
</script></pre><div class="contentsignin">ログイン後にコピー</div></div>
1) 配列型
# は使用されません
script setup のコンポーネントでは、props
オプションを使用して
prop を宣言できます:
1 2 3 4 5 6 7 | export default {
props: [ 'foo' ],
setup(props) {
console.log(props.foo)
}
}
|
ログイン後にコピー
例、オブジェクトの使用構文
App.vue
は、整数 props
-
1 2 3 | <template>
<show-info></show-info>
</template>
|
ログイン後にコピー
# で定義されたコンポーネントと属性を使用します。 #showInfo.vue Subcomponent
数値
ブール値
配列- オブジェクト
- 日付
- Function
- Symbol
-
- 2) オブジェクト型
-
- は
object
の形式で宣言されます。 props (これは非常に一般的に使用されます)
Use
script setup
1 2 3 4 | defineProps({
title: String,
likes: Number
})
|
ログイン後にコピー
non-
script setup
1 2 3 4 5 6 | export default {
props: {
title: String,
likes: Number
}
}
|
ログイン後にコピー
3. 子コンポーネントは親コンポーネントに渡されます
⭐⭐
子コンポーネントは親コンポーネントに渡され、$ を通じてイベントがトリガーされます放出 # 子コンポーネントは親コンポーネントにコンテンツを渡します:
子コンポーネントで何らかのイベントが発生すると、コンポーネントの場合、親コンポーネントはコンテンツを切り替える必要があります;
子コンポーネントに親コンポーネントに渡したいコンテンツがある場合; 
$emit("add", count )
最初のパラメータはカスタマイズされたイベント名で、2 番目のパラメータは渡されたパラメータです。
ここには 2 つのパラメータがあります。サブコンポーネントと親コンポーネント
サブコンポーネントは、場合によってトリガーされるイベントの名前で定義されます
親コンポーネントで、監視するイベントの名前を渡しますv-on (構文シュガー @) の形式で、対応するメソッドにバインドします。
#最後に、子コンポーネントでイベントが発生すると、イベント名に従って対応するイベントがトリガーされます
- 1) 親コンポーネント
App.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 25 26 27 28 29 30 31 32 | <template>
<div>
<h2>当前计数:{{counter}}</h2>
<!-- 1.自定义add-counter 并且监听内部的add事件 -->
<add-counter></add-counter>
<!-- 2.自定义su-counter组件,监听内部的sub事件 -->
<sub-counter></sub-counter>
</div>
</template>
<script>
import AddCounter from './AddCounter.vue'
import SubCounter from './SubCounter.vue'
export default {
components: {
AddCounter,
SubCounter
},
data() {
return {
counter:0
}
},
methods:{
addBtnClick( count ) {
this.counter += count
},
subBtnClick( count ) {
this.counter -= count
}
}
}
</script>
|
ログイン後にコピー
2) サブコンポーネント 1AddCounter .vue
- ここで定義されているのはカウンターの加算演算です
サブコンポーネントイベントがトリガーされた後、これを通して $emit イベントを発行する方法1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <template>
<div>
<button>+1</button>
<button>+5</button>
<button>+10</button>
</div>
</template>
<script>
export default {
methods:{
btnClick( count ) {
this. $emit ( "add" , count )
}
}
}
</script>
|
ログイン後にコピー
3) サブコンポーネント 2
SubCounter.vue
ここで定義されているのはカウンターのデクリメント操作です
サブコンポーネントのイベントトリガー その後 # を通じてイベントが発行されます##this.$emit
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <template>
<div>
<button>-1</button>
<button>-5</button>
<button>-10</button>
</div>
</template>
<script>
export default {
emits:[ "addd" ],
methods:{
btnClick( count ) {
this. $emit ( "sub" , count )
}
}
}
</script>
|
ログイン後にコピー
このケースは非常に古典的なものなので、何度でも考えることができます~
(学習ビデオの共有:
プログラミングの基本ビデオ
)
以上がVue の親コンポーネントと子コンポーネントの間で通信する方法の簡単な分析 (父親から息子へのパス | 息子から父親へのパス)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。