Bagaimana untuk berkomunikasi antara komponen ibu bapa dan anak Vue? (dengan contoh)

vueBagaimana untuk berkomunikasi antara komponen ibu bapa dan anak? Artikel berikut akan memperkenalkan kepada anda cara komponen induk menghantar data kepada komponen anak, dan komponen anak menghantar data kepada komponen induk saya harap ia akan membantu anda!

Pembolehubah dan data dalam setiap komponen adalah bebas Bagaimana jika komponen lain ingin mengakses data dalam komponen lain?

Bagaimana untuk menyelesaikan komunikasi antara komponen?

Penyelesaian:

Anda boleh menggunakan komponen induk untuk menghantar data kepada komponen anak dan anda juga boleh menggunakan komponen anak untuk menghantar data kepada komponen induk. Pendek kata, ia diturunkan dari bapa kepada anak lelaki, dan dari anak kepada bapa. (Belajar perkongsian video: tutorial video vue)

Mari kita bincangkan secara terperinci tentang cara komponen induk menghantar data kepada komponen anak.

Bapa kepada anak

---

Teori: Jika komponen A memperkenalkan dan menggunakan komponen B yang lain, maka komponen A ialah komponen induk dan komponen B adalah subkomponen.

Proses pelaksanaan:

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

Rajah prinsip

Komponen induk Footer.vue

Sesuaikan sifat pada label komponen anak dalam komponen induk

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

Komponen anak MyCon.vue

Gunakan prpos dalam komponen anak untuk menerima data daripada komponen induk

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

Kes kecil menggunakan penghantaran ibu bapa ke anak

Komponen induk App.vue

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

Komponen kanak-kanak MyProduct.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h2 id="标题-nbsp-nbsp-goodname-nbsp">标题： {{ goodname }}</h2>
    <p>价格: {{ price }}元</p>
    <p>{{ info }}</p>
  </div>
</template>

<script>
export default {
  props: ["goodname", "price", "info"],
};
</script>

<style>
</style>

Paparan kesan

Dari anak kepada bapa

---

Proses pelaksanaan

     1.在父组件中引入子组件、注册子组件、使用子组件  
     2.在父组件的子组件标签上加一个事件监听 例如:  <MyCon @abc="fn" />
     3.在子组件中触发这个自定义的监听事件。例如:this.$emit("abc",参数)

Rajah prinsip

Komponen induk App.vue

dalam induk komponen Tambahkan pendengar acara pada label subkomponen untuk menerima data menggunakan parameter formal

<template>
  <div>
    <h1 id="父组件">父组件</h1>
    <!-- 1.添加事件监听 -->
    <!-- 当子组件发生了abc事件要执行fn函数 -->
    <MyCon @abc="fn" />
  </div>
</template>
<script>
// 引入子组件
import MyCon from "./MyCon.vue";
export default {
  methods: {
  // 形参接收
    fn(obj) {
      // 打印查看有没有获取到
      console.log("fn发生了abc事件", obj);
    },
  },
  components: { MyCon },
};
</script>

subkomponen MyCon.vue

untuk mencetuskan acara pendengaran tersuai ini dalam subkomponen

<template>
  <div>
    <h2 id="子组件">子组件</h2>
    <button @click="ConFn">子传父</button>
  </div>
</template>
<script>
export default {
  methods: {
    ConFn() {
      console.log("子组件click");
      // 2.触发abc事件
      this.$emit("abc", { name: "吊毛谭磊" });
    },
  },
};
</script>

Sarung produk menggunakan komponen induk

komponen induk App.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h1 id="父组件">父组件</h1>
    <!-- 1. 父传。自定义属性 -->
    <!-- 添加自定义事件 -->
    <MyProduct
      v-for="(item, idx) in list"
      :idx="idx"
      :key="item.id"
      :price="item.proprice"
      :info="item.info"
      :goodname="item.proname"
      @pdd="fn"
    />
  </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 },
  methods: {
    fn(obj) {
      console.log("父组件,收到了pdd事件", obj);
      // 计算砍了几元 相减  再进行重新赋值
      this.list[obj.idx].proprice -= obj.ran;
    },
  },
};
</script>

<style>
</style>

Subkomponen MyProduct.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h2 id="标题-nbsp-nbsp-goodname-nbsp">标题： {{ goodname }}</h2>
    <p>价格: {{ price }}元</p>
    <p>{{ info }}</p>
    <button @click="bargain">随机砍价</button>
  </div>
</template>

<script>
export default {
  // 子接收
  props: ["goodname", "price", "info", "idx"],
  methods: {
    bargain() {
      // 随机数字
      const ran = Math.ceil(Math.random() * 10);
      // 触发自定义事件
      // 为了知道具体是哪个商品要减少价格，所以要回传idx下标
      this.$emit("pdd", { idx: this.idx, ran });
    },
  },
};
</script>

<style>
</style>

Paparan kesan

(Kongsi video pembelajaran: Pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Bagaimana untuk berkomunikasi antara komponen ibu bapa dan anak Vue? (dengan contoh). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!