Wie kommuniziere ich zwischen übergeordneten und untergeordneten Vue-Komponenten? (mit Beispielen)

vueWie kommuniziert man zwischen übergeordneten und untergeordneten Komponenten? Im folgenden Artikel erfahren Sie, wie die übergeordnete Komponente Daten an die untergeordnete Komponente weitergibt und wie die untergeordnete Komponente die Daten an die übergeordnete Komponente weitergibt. Ich hoffe, er ist hilfreich für Sie!

Die Variablen und Daten in jeder Komponente sind unabhängig. Was ist, wenn eine andere Komponente auf die Daten in einer anderen Komponente zugreifen möchte?

Wie löst man die Kommunikation zwischen Komponenten?

Lösung:

Sie können die übergeordnete Komponente verwenden, um Daten an die untergeordnete Komponente zu übergeben, und Sie können die untergeordnete Komponente auch verwenden, um Daten an die übergeordnete Komponente zu übergeben. Kurz gesagt, es wird vom Vater an den Sohn und von Sohn an Vater weitergegeben. (Teilen von Lernvideos: vue-Video-Tutorial)

Lassen Sie uns ausführlich darüber sprechen, wie die übergeordnete Komponente Daten an die untergeordnete Komponente übergibt.

Übergang vom Vater zum Sohn

---

Theorie: Wenn eine Komponente A eine andere Komponente B einführt und verwendet, dann ist Komponente A die übergeordnete Komponente und Komponente B die untergeordnete Komponente.

Implementierungsprozess:

   1.在父组件中引入子组件、注册子组件、使用子组件  
   2.在父组件中的子组件标签上自定义一个属性 左边是定义的名称，右边是父组件中的数据 例如
   <MyCon :list="list" />
   3.在子组件中用prpos接收父组件传来的数据 例如：prpos:[&#39;list&#39;]  注意这里面的名称必须要和父组件
   定义的名称一致才能可以。

Prinzipdiagramm

Footer.vue der übergeordneten Komponente

Passen Sie ein Attribut auf der Beschriftung der untergeordneten Komponente in der übergeordneten Komponente an

<template>
  <div>
    <h1 id="父组件传子组件">父组件传子组件</h1>
    <!-- 使用组件   自定义属性 -->
    <MyCon :name="name" :age="age" />
  </div>
</template>
<script>
// 引入组件 --> 创建组件 -->  使用组件
// 引入组件
import MyCon from "./MyCon.vue";
export default {
   //  创建组件 
  components: { MyCon },
  // 数据
  data() {
    return {
      name: "张三",
      age: 38,
    };
  },
};
</script>

MyCon .vue

Verwenden Sie prpos in der untergeordneten Komponente, um Daten von der übergeordneten Komponente zu empfangen

<template>
  <div>
    <h2 id="子组件">子组件</h2>
     // 直接在标签中使用
    <p>{{ name }} {{ age }}</p>
    <button @click="fn">点击修改props的值</button>
  </div>
</template>
<script>
export default {
  // 子组件接收父组件传来的数据
  props: ["name", "age"],
  methods: {
    fn() {
      this.name = "傻逼谭磊";
      this.age = 20
    },
  },
};
</script>

Wirkungsanzeige

Sohn zum Vater

Umsetzungsprozess

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h1 id="父组件">父组件</h1>
    <!-- 1. 父传。自定义属性 -->
    <MyProduct
      v-for="item in list"
      :key="item.id"
      :price="item.proprice"
      :info="item.info"
      :goodname="item.proname"
    />
  </div>
</template>

<script>
// 导入->注册->使用
import MyProduct from "./MyProduct.vue";
export default {
  data() {
    return {
      list: [
        {
          id: 1,
          proname: "超级好吃的棒棒糖",
          proprice: 18.8,
          info: "开业大酬宾, 全场8折",
        },
        {
          id: 2,
          proname: "超级好吃的大鸡腿",
          proprice: 34.2,
          info: "好吃不腻, 快来买啊",
        },
        {
          id: 3,
          proname: "超级无敌的冰激凌",
          proprice: 14.2,
          info: "炎热的夏天, 来个冰激凌了",
        },
      ],
    };
  },
  components: { MyProduct },
};
</script>

<style>
</style>

Prinzip. Illustration

Die übergeordnete Komponente App.vue

---

befindet sich im übergeordneten Element Fügen Sie der Unterkomponentenbezeichnung der Komponente einen Ereignis-Listener hinzu, um Daten mit formalen Parametern zu empfangen In diesem Fall wird die Kind-zu-Vater-App.vue-Parent-Komponente verwendet. Web-Frontend Entwicklung
,

Programmierung Basisvideo

)

Das obige ist der detaillierte Inhalt vonWie kommuniziere ich zwischen übergeordneten und untergeordneten Vue-Komponenten? (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!