Eine kurze Diskussion über verschiedene Methoden der Vue3-Komponentenkommunikation

Wie kommuniziere ich zwischen vue3-Komponenten? Der folgende Artikel führt Sie durch verschiedene Möglichkeiten der Kommunikation mit vue3-Komponenten. Ich hoffe, dass er für Sie hilfreich ist. Die Kommunikationsmethoden für Vue3-Komponenten lauten wie folgt: Props, Emit, Ref, Attrs

Vuex

Handschuh

[Verwandte Empfehlung: "vue.js tutorial"]

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
• Die übergeordnete Komponente erhält die Eigenschaften der untergeordneten Komponente oder Anrufe Die Methode der untergeordneten Komponente

<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: Enthält eine Sammlung von Nicht-Requisiten-Attributen außer Klasse und Stil im übergeordneten Bereich.

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

kann die bidirektionale Bindung mehrerer Daten unterstützen

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

bereitstellen/injizieren

bereitstellen/injizieren für Abhängigkeitsinjektion Provide: Ermöglicht uns die Angabe der Daten, die wir den Nachkommenkomponenten zur Verfügung stellen möchten injizieren: Akzeptieren Sie die Daten, die Sie dieser Komponente hinzufügen möchten, in einer beliebigen untergeordneten Komponente. Unabhängig davon, wie tief die Komponente verschachtelt ist, können Sie sie direkt verwenden Vue3 Komponentenübergreifende Kommunikation, Alternative zu mitt.js, aber die prinzipielle Methode EventBus ist dieselbe. Installationsmethode npm i mitt -S. Kapselung zum Programmieren

! !

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über verschiedene Methoden der Vue3-Komponentenkommunikation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!