Props は、子コンポーネントが親コンポーネントと通信するための一般的な方法であり、主な手順は次のとおりです。
1. props が親コンポーネントから受け取る変数を子コンポーネント内で定義します (変数の型を指定する必要があり、デフォルト値はオプションです)。
// 这里以 document.vue 子组件为例
// 通过 defineProps 宏的方式声明， props 接受父组件传递过来的数据
const props = defineProps({
title: {
type: String,
default: 'Default title'
}
})2. 親コンポーネントは子コンポーネントを導入し、親コンポーネントの変数をバインドして子コンポーネントに渡します。
// 这里 App.vue 为父组件
import document from './components/document.vue'
const title = ref("标题")
// ......
<document :title="title"></document>3. props を出力し、サブコンポーネントの props 内のデータをそれぞれ使用します。
console.log("props: ", props);
// ......
// 在template 模板中不需要通过props.title方式获取
<template>
<div> {
{ title }} </div>
</template>子コンポーネントが親コンポーネントのデータを変更したい場合は、まず原則を明確にする必要があります:誰のデータが維持されるか、props を介して直接変更することはできません (変更は可能ですが、許可されず、コンポーネントを破棄します)データの -way フロー)。公式は、子コンポーネントから親コンポーネントへのデータ通信の問題を処理するためのエミットを提供しています。これは次のステップに分かれています。
1. 親コンポーネントへの送信によってトリガーされるイベントを子コンポーネントで定義します (複数のイベントが存在する可能性があります)。
// 通过 defineEmits 宏的方式声明
const emit = defineEmits(['update:title'])2. サブコンポーネントは手動でイベントをトリガーし、更新されたデータを渡します。
// document.vue
<button @click="changeTitle()">click</button>
// ......
const changeTitle = (newTitle = “新标题”) => {
emit('update:title', newTitle)
}3. 親コンポーネントは、子コンポーネントのタグで同じ名前のイベントをバインドし、更新されたデータを割り当てます。
// App.vue
<document :title="title" @update:title="(v) => title = v"></document>ここでのイベント名の「update:eventName」は固定の記述方法で、Vue では v2.3 で sync 修飾子が導入され、component タグ内に @update 関数を記述する必要がなくなりました。
同期修飾子を使用します。
// App.vue
<document :title.sync="title" @change-title="(v) => title = v"></document>
<!-- <document :title.sync="title" @changeTitle="(v) => title = v"></document>-->
<!-- <document :title.sync="title" @ChangeTitle="(v) => title = v"></document>-->
// document.vue 添加 changeTitle 事件
const emit = defineEmits(['update:title', 'changeTitle'])また、ここでバインドされているchangeTitleイベントはkebab-case（ダッシュで名前が付けられています）であり、キャメルケースまたはラージキャメルケースのいずれかを使用できます。