vue3 コンポーネント通信方法の概要と例

<子:msg2="msg2" />
<スクリプトの設定>
    const props = defineProps({
        //書き込み方法1 msg2:String
        // 書き込み方法 2 msg2:{
            タイプ:文字列、
            デフォルト：''
        }
    })
    console.log(props) // {msg2:'これはサブコンポーネント2の情報です'}
</スクリプト>

// 子.vue
<テンプレート>
    // 記述方法 1 <div @click="emit('myclick')">button</div>
    // 記述方法 2 <div @click="handleClick">button</div>
</テンプレート>
<スクリプトの設定>
    // メソッド 1 const emitting = defineEmits(['myClick'],['myClick2'])
    // メソッド 2 const handleClick = () => {
        emitting('myClick','これは親コンポーネントに送信される情報です');
     }
      
     // 方法 2 は vue3.2 には適用できません。使用されている useContext() は廃止されています。import { useContext } from 'vue'
     const { 出力 } = useContext()
     const ハンドルクリック = () => { 
      emitting('myClick','これは親コンポーネントに送信される情報です'   
     }
</スクリプト>
 
// Parent.vue は <template> に応答します
    <child @myClick="onMyClick"></child>
</テンプレート>
<スクリプトの設定>
    「./child.vue」から子をインポートします。
    onMychilk をインポートします (msg) => {
        console.log(msg) // 親コンポーネントが受信した情報}
</スクリプト>

<スクリプトの設定>
    // 方法 1: useContext() は vue3.2 以降廃止されました import { useContext } from 'vue'
    定数ctx = useContext()
    // 外部に公開されるプロパティとメソッドはctx.expose({
        childName: 'これは子コンポーネントのプロパティです',
        いくつかのメソッド(){
        console.log('これは子コンポーネントのメソッドです')
        }
    })
</スクリプト>
 
// Parent.vue 注記 ref="comp"
<テンプレート>
    <child ref="comp"></child>
    <button @click="handleClick">ボタン</button>
</テンプレート>
<スクリプト>
    './child.vue' から子をインポートします。
    'vue' から { ref } をインポートします 
    定数comp = ref(null)
    const ハンドルクリック = () => {
        console.log(comp.value.childName)
        comp.value.someMethod() //サブコンポーネントによって公開されたメソッドを呼び出す}
</スクリプト>

// 親コンポーネント <child :msg1="msg1" :msg2="msg2" title="3333"></child>
<スクリプトの設定>
    './child.vue' から子をインポートします。
    'vueから{ref,reactive}をインポートします
    定数msg1 = ref('111')
    定数msg2 = ref('222')
</スクリプト>
 
// サブコンポーネント <スクリプト設定>
    'vue' から {defineProps、useContext、useAttars} をインポートします。
    const props = defineProps({
        メッセージ1: 文字列
    })
     
    // 方法 1
    定数ctx = useContext()
    console.log(ctx.attars) // {msg2:'222',title:'333'}
     
    // 方法 2 
    定数 attrs = useAttrs()
    console.log(attars) // {msg2:'2222',title:'3333'}
</スクリプト>

<child v-model:key="キー" v-model:value="値" />
<スクリプト>
    './child.vue' から子をインポートします。
    'vue' から { ref,reactive } をインポートします
    定数キー = ref('111')
    定数値 = ref('222')
</スクリプト>
 
//サブコンポーネント <テンプレート>
   <button @click="handleClick"></button>
</テンプレート>
<スクリプトの設定>
    // メソッド 1 v3.2 は削除されました import { useContext } from 'vue'
    const { 出力 } = useContext()
     
    // メソッド 2import { defineEmits } from 'vue'
    const 出力 = defineEmits(['キー','値'])
     
    // 使用法 const handleClick = () => {
        出力('update:key','新しいキー')
        出力('update:value','新しい値')
    }
</スクリプト>

// 親コンポーネント <スクリプト設定>
    'vue' から { provide } をインポートします
    const name = provide('name')
    console.log('name','ムフア')
</スクリプト>
//サブコンポーネント <スクリプト設定>
    'vue' から { inject } をインポートします
    定数名 = 注入('名前')
    console.log(name) //Muhua</script>

//ストア/index.js
'vuex' から {createStore} をインポートします。
エクスポートデフォルトcreateStore({
    状態:{count:1},
    ゲッター:{
        getCount:state=>state.count
    },
    突然変異:
        追加(状態){
            状態.count++
        }
    }
   })
 // メイン.js
 'vue' から {createApp} をインポートします。
 './App.vue' から APP をインポートします。
 './store' からストアをインポートします
 createApp(APP).use(store).mount("#app")
  
 // <template> を直接使用する
     <div>
         {{ $store.state.count }}
     </div>
     <button @click="$store.commit('add')">
     </ボタン>
 </テンプレート>
  
 // <スクリプト設定> を取得します
     'vuex' から { useStore,computed } をインポートします。
     定数ストア = useStore()
     コンソールログ(ストアの状態カウント)
      
     const count = 計算された (()=>store.state.count)
     コンソール.log(カウント)
 </スクリプト>

ミット
'mitt' から mitt をインポートする
定数ミット = ミット()
デフォルトのミットをエクスポートする

// コンポーネントA 
<スクリプトの設定>
    './mitt' から mitt をインポートします
    const ハンドルクリック = () => {
        mitt.emit('handleChange')
    }
</スクリプト>
// コンポーネント B 
<スクリプトの設定>
'./mitt' から mitt をインポートします
'vue' から { onUnmounted } をインポートします
const someMethod = () => {...}
mitt.on('handleChange',someMethod)
マウント解除時(()=>{
    mitt.off('handleChange',someMethod)
})
</スクリプト>