Maison >interface Web >Voir.js >Une brève discussion sur plusieurs méthodes de communication des composants vue3

Une brève discussion sur plusieurs méthodes de communication des composants vue3

青灯夜游
青灯夜游avant
2021-12-14 19:24:125286parcourir

Comment communiquer entre les composants vue3 ? L'article suivant vous présentera plusieurs façons de communiquer avec les composants vue3. J'espère qu'il vous sera utile. Les méthodes de communication des composants

Une brève discussion sur plusieurs méthodes de communication des composants vue3

vue3 sont les suivantes

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

[Recommandation associée : "tutoriel 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

Le composant parent obtient les propriétés du composant enfant ou appelle la méthode du composant enfant

<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 : contient une collection d'attributs non-props, à l'exception de la classe et du style dans la portée parent

// 父组件
<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

peut prendre en charge plusieurs liaisons bidirectionnelles de données

<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>

provide / inject

provide/inject pour l'injection de dépendance provide : nous permet de spécifier les données que nous souhaitons fournir aux composants descendants injecter : Acceptez les données que vous souhaitez ajouter à ce composant dans n'importe quel composant descendant. Quelle que soit la profondeur de l'imbrication du composant, vous pouvez l'utiliser directement

    // 父组件
    <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 &#39;vuex&#39;
   export default createStore({
       state:{count:1},
       getters:{
           getCount:state=>state.count
       },
       mutations:{
           add(state){
               state.count++
           }
       }
      })
    // main.js
    import { createApp } from &#39;vue&#39;
    import APP from &#39;./App.vue&#39;
    import store from &#39;./store&#39;
    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

Il n'y en a plus. EventBus dans Vue3 Communication inter-composants, alternative mitt.js, mais la méthode principale EventBus est la même
Méthode d'installation npm i mitt -S
Encapsulation

mitt.js
import mitt from &#39;mitt&#39;
const mitt = mitt()
export default mitt

Utilisé entre composants

// 组件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>

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer