Perbincangan ringkas mengenai beberapa kaedah komunikasi komponen vue3

Bagaimana untuk berkomunikasi antara komponen vue3? Artikel berikut akan membawa anda melalui beberapa cara untuk berkomunikasi dengan komponen vue3 saya harap ia akan membantu anda.

kaedah komunikasi komponen vue3 adalah seperti berikut

• props
• $emit
• $expose/ref
• $attrs
• v-model
• provide/inject
• Vuex
• mitt

[Cadangan berkaitan: "tutorial vue.js"]

props

<child :msg2="msg2" />
<script setup>
    const props = defineProps({
        // 写法一
        msg2:String
        // 写法二
        msg2:{
            type:String,
            default:&#39;&#39;
        }
    })
    console.log(props) // {msg2:&#39;这是传级子组件的信息2&#39;}
</script>

$emit

//Child.vue
<template>
    // 写法一
    <div @click="emit(&#39;myclick&#39;)">按钮</div>
    // 写法二
    <div @click="handleClick">按钮</div>
</template>
<script setup>
    // 方法一
    const emit = defineEmits([&#39;myClick&#39;],[&#39;myClick2&#39;])
    // 方法二
    const handleClick = () => {
        emit(&#39;myClick&#39;,&#39;这是发送给父组件的信息&#39;);
     }
     
     // 方法二 不适用于vue3.2，使用的useContext()已经舍弃
     import { useContext } from &#39;vue&#39;
     const { emit } = useContext()
     const handleClick = () => { 
      emit(&#39;myClick&#39;,&#39;这是发送给父组件的信息&#39;   
     }
</script>

// Parent.vue响应
<template>
    <child @myClick="onMyClick"></child>
</template>
<script setup>
    import child from "./child.vue"
    import onMychilk = (msg) => {
        console.log(msg) // 父组件收到的信息 
    }
</script>

expose / ref

Komponen induk mendapat sifat komponen anak atau memanggil kaedah komponen anak

<script setup>
    // 方法一：useContext() vue3.2 之后已经舍弃
    import { useContext } from &#39;vue&#39;
    const ctx = useContext()
    // 对外暴露属性方法等都可以
    ctx.expose({
        childName: &#39;这是子组建的属性&#39;,
        someMethod(){
        console.log(&#39;这是子组件的方法&#39;)
        }
    })
</script>

// Parent.vue 注意 ref="comp"
<template>
    <child ref="comp"></child>
    <button @click="handleClick">按钮</button>
</template>
<script>
    import child from &#39;./child.vue&#39;
    import { ref } from &#39;vue&#39; 
    const comp = ref(null)
    const handleClick = () => {
        console.log(comp.value.childName)
        comp.value.someMethod() // 调用子组件对外暴露的方法
    }
</script>

attts

attrs: Mengandungi koleksi atribut bukan prop kecuali kelas dan gaya dalam skop induk

// 父组件
<child :msg1="msg1" :msg2="msg2" title="3333"></child>
<script setup>
    import child from &#39;./child.vue&#39;
    import { ref,reactive } from &#39;vue
    const msg1 = ref(&#39;111&#39;)
    const msg2 = ref(&#39;222&#39;)
</script>

// 子组件
<script setup>
    import { defineProps,useContext,useAttars } from &#39;vue&#39;
    const props = defineProps({
        msg1: String
    })
    
    // 方法1
    const ctx = useContext()
    console.log(ctx.attars) // {msg2:&#39;222&#39;,title:&#39;333&#39;}
    
    // 方法2 
    const attrs = useAttars()
    console.log(attars)  // {msg2:&#39;2222&#39;,title:&#39;3333&#39;}
</script>

v-model

Boleh menyokong pengikatan dua hala berbilang data

<child v-model:key="key" v-modle:value="value" />
<script>
    import child from &#39;./child.vue&#39;
    import { ref,reactive } from &#39;vue&#39;
    const key = ref(&#39;111&#39;)
    const value = ref(&#39;222&#39;)
</script>

//子组件
<template>
   <button @click="handleClick"></button>
</template>
<script setup>
    // 方法一  v3.2 已被移除
    import { useContext } from &#39;vue&#39;
    const { emit } = useContext()
    
    // 方法二
    import { defineEmits } from &#39;vue&#39;
    const emit = defineEmits([&#39;key&#39;,&#39;value&#39;])
    
    //用法
    const handleClick = () => {
        emit(&#39;update:key&#39;,&#39;新的key&#39;)
        emit(&#39;update:value&#39;,&#39;新的value&#39;)
    }
</script>

menyediakan/menyuntik

menyediakan/menyuntik untuk kebergantungan suntikan provide: membolehkan kami menentukan data yang ingin kami sediakan kepada komponen keturunan inject: Terima data yang anda ingin tambahkan pada komponen ini dalam mana-mana komponen turunan Tidak kira seberapa dalam komponen itu bersarang, anda boleh menggunakannya secara langsung

    // 父组件
    <script setup>
        import { provide } from &#39;vue&#39;
        const name = provide(&#39;name&#39;)
        console.log(&#39;name&#39;,&#39;沐华&#39;)
    </script>
    //子组件
    <script setup>
        import { inject } from &#39;vue&#39;
        const name = inject(&#39;name&#39;)
        console.log(name) //木华
    </script>

Vuex

   //store/index.js
   import { createStore } from 'vuex'
   export default createStore({
       state:{count:1},
       getters:{
           getCount:state=>state.count
       },
       mutations:{
           add(state){
               state.count++
           }
       }
      })
    // main.js
    import { createApp } from 'vue'
    import APP from './App.vue'
    import store from './store'
    createApp(APP).use(store).mount("#app")
    
    // 直接使用
    <template>
        <div>
            {{ $store.state.count }}
        </div>
        <button @click="$store.commit(&#39;add&#39;)">
        </button>
    </template>
    
    // 获取
    <script setup>
        import { useStore,computed } from &#39;vuex&#39;
        const store = useStore()
        console.log(store.state.count)
        
        const count = computed (()=>store.state.count)
        console.log(count)
    </script>

mitt

Komunikasi merentas komponen EventBus tidak lagi tersedia dalam Vue3 Alternatifnya ialah mitt.js, tetapi prinsip dan kaedah EventBus adalah sama
Kaedah pemasangan npm i mitt - S
Encapsulation

mitt.js
import mitt from 'mitt'
const mitt = mitt()
export default mitt

Digunakan antara komponen

// 组件A 
<script setup>
    import mitt from &#39;./mitt&#39;
    const handleClick = () => {
        mitt.emit(&#39;handleChange&#39;)
    }
</script>
// 组件B 
<script setup>
import mitt from &#39;./mitt&#39;
import { onUnmounted } from &#39;vue&#39;
const someMethod = () => {...}
mitt.on(&#39;handleChange&#39;,someMethod)
onUnmounted(()=>{
    mitt.off(&#39;handleChange&#39;,someMethod)
})
</script>

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila lawati: Pengenalan kepada Pengaturcaraan! !

Atas ialah kandungan terperinci Perbincangan ringkas mengenai beberapa kaedah komunikasi komponen vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!