Vue3における7種類のコンポーネント通信の詳細

// Parent.vue は <child :msg1="msg1" :msg2="msg2"></child> を送信します。
<スクリプト>
「./child.vue」から子をインポートします。
「vue」から{ref、reactive}をインポートします。
エクスポートデフォルト{
    データ（）{
        戻る {
            メッセージ1: 「これはサブコンポーネント1の情報です」
        }
    },
    設定（）{
        // レスポンシブデータを作成する // 記述方法 1 は基本型 ref に適用でき、他の用途もあります。次の章では、const msg2 = ref("これはサブコンポーネント 2 の情報です") を紹介します。
        
        // メソッド 2 は、配列やオブジェクトなどの複雑な型に適しています。const msg2 = reactive(["これはサブコンポーネント 2 の情報です"])
        
        戻る {
            メッセージ2
        }
    }
}
</スクリプト>

// Child.vue は <script> を受け取ります
エクスポートデフォルト{
  props: ["msg1", "msg2"], // この行が書かれていない場合、次の行は受け取られません setup(props) {
    console.log(props) // { msg1: "これは子コンポーネントに渡された情報 1 です", msg2: "これは子コンポーネントに渡された情報 2 です" }
  },
}
</スクリプト>

// Parent.vue は <child :msg2="msg2"></child> を送信します。
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    「vue」から{ref、reactive}をインポートします。
    const msg2 = ref("これは子コンポーネント2に渡される情報です")
    // または複合型 const msg2 = reactive(["これはサブコンポーネント 2 の情報です"])
</スクリプト>

// Child.vue は <script setup> を受け取ります
    // 直接インポートする必要はありません // import { defineProps } from "vue"
    const props = defineProps({
        //書き込み方法1 msg2: 文字列
        // 書き込み方法 2 msg2:{
            タイプ:文字列、
            デフォルト：""
        }
    })
    console.log(props) // { msg2: "これはサブコンポーネント 2 の情報です" }
</スクリプト>

// Parent.vue は <template> に応答します
    <child @myClick="onMyClick"></child>
</テンプレート>
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    定数 onMyClick = (メッセージ) => {
        console.log(msg) // これは親コンポーネントが受信した情報です}
</スクリプト>

// 子.vue
<スクリプトの設定>
    // 方法 1 は、useContext() が非推奨となった Vue 3.2 には適用できません。import { useContext } from "vue"
    定数ctx = useContext()
    // 外部に公開されるプロパティとメソッドはctx.expose({
        childName: "これは子コンポーネントのプロパティです",
        いくつかのメソッド(){
            console.log("これは子コンポーネントのメソッドです")
        }
    })
    
    // 方法 2 は Vue 3.2 バージョンに適用可能で、インポートする必要はありません // import { defineExpose } from "vue"
    定義公開({
        childName: "これは子コンポーネントのプロパティです",
        いくつかのメソッド(){
            console.log("これは子コンポーネントのメソッドです")
        }
    })
</スクリプト>

// Parent.vue 注記 ref="comp"
<テンプレート>
    <child ref="comp"></child>
    <button @click="handlerClick">ボタン</button>
</テンプレート>
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    「vue」から{ref}をインポートします
    定数comp = ref(null)
    const ハンドラクリック = () => {
        console.log(comp.value.childName) // 子コンポーネントによって公開されているプロパティを取得します。 comp.value.someMethod() // 子コンポーネントによって公開されているメソッドを呼び出します。 }
</スクリプト>

// Parent.vue は <child :msg1="msg1" :msg2="msg2" title="3333"></child> を送信します。
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    「vue」から{ref、reactive}をインポートします。
    定数msg1 = ref("1111")
    定数msg2 = ref("2222")
</スクリプト>

// Child.vue は <script setup> を受け取ります
    「vue」から{defineProps、useContext、useAttrs}をインポートします。
    // バージョン 3.2 では defineProps を導入する必要はありません。const props = defineProps({ を使用するだけです。
        メッセージ1: 文字列
    })
    // メソッド 1 は、useContext() が非推奨となった Vue 3.2 には適用できません。const ctx = useContext()
    // msg1 が props を使用して受信されない場合は、次のようになります { msg1: "1111", msg2: "2222", title: "3333" }
    console.log(ctx.attrs) // { msg2:"2222", タイトル: "3333" }
    
    // 方法 2 は Vue 3.2 バージョンに適用可能 const attrs = useAttrs()
    console.log(attrs) // { msg2:"2222", タイトル: "3333" }
</スクリプト>

// 親.vue
<child v-model:key="キー" v-model:value="値"></child>
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    「vue」から{ref、reactive}をインポートします。
    定数キー = ref("1111")
    定数値 = ref("2222")
</スクリプト>

// 子.vue
<テンプレート>
    <button @click="handlerClick">ボタン</button>
</テンプレート>
<スクリプトの設定>
    
    // 方法 1 は、useContext() が非推奨となった Vue 3.2 には適用できません。import { useContext } from "vue"
    const { 出力 } = useContext()
    
    // 方法 2 は Vue 3.2 バージョンに適用可能であり、導入する必要はありません // import { defineEmits } from "vue"
    const 出力 = defineEmits(["キー","値"])
    
    // 使用法 const handlerClick = () => {
        出力("update:key", "新しいキー")
        出力("update:value", "新しい値")
    }
</スクリプト>

// 親.vue
<スクリプトの設定>
    「vue」から{provide}をインポートします
    provide("name", "Muhua")
</スクリプト>

// 子.vue
<スクリプトの設定>
    「vue」からインポートします。
    const name = inject("name")
    console.log(name) // ムー・フア</script>

// ストア/index.js
「vuex」から{createStore}をインポートします
エクスポートデフォルトcreateStore({
    状態:{ カウント: 1 },
    ゲッター:{
        getCount: 状態 => 状態.count
    },
    突然変異:
        追加(状態){
            状態.count++
        }
    }
})

// メイン.js
「vue」から{createApp}をインポートします
「./App.vue」からアプリをインポートします。
「./store」からストアをインポートします。
createApp(App).use(store).mount("#app")

// ページ.vue
// 方法 1: <template> を直接使用する
    <div>{{ $store.state.count }}</div>
    <button @click="$store.commit('add')">ボタン</button>
</テンプレート>

// <スクリプト設定> を取得する方法 2
    「vuex」から useStore, computed をインポートします。
    定数ストア = useStore()
    コンソールログ(ストアの状態カウント) // 1

    const count = computed(()=>store.state.count) // レスポンシブ、vuex データの変更に応じて変化します console.log(count) // 1 
</スクリプト>