Vue 상위 구성요소와 하위 구성요소 간에 통신하는 방법은 무엇입니까? (예제 포함)

vue상위 구성 요소와 하위 구성 요소 간에 통신하는 방법은 무엇입니까? 다음 글에서는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달하는 방법, 자식 컴포넌트가 부모 컴포넌트에 데이터를 전달하는 방법을 소개하겠습니다. 도움이 되셨으면 좋겠습니다.

각 구성 요소의 변수와 데이터는 독립적입니다. 다른 구성 요소가 다른 구성 요소의 데이터에 액세스하려고 하면 어떻게 되나요?

구성 요소 간 통신을 해결하는 방법은 무엇입니까?

해결책:

상위 구성 요소를 사용하여 하위 구성 요소에 데이터를 전달할 수도 있고, 하위 구성 요소를 사용하여 상위 구성 요소에 데이터를 전달할 수도 있습니다. 즉, 아버지에서 아들로, 아들에서 아버지로 유전됩니다. (학습 영상 공유: vue 영상 튜토리얼)

이제 상위 컴포넌트가 하위 컴포넌트에 데이터를 전달하는 방법에 대해 자세히 이야기해 보겠습니다.

아버지에서 아들로 전달

---

이론: 구성 요소 A가 다른 구성 요소 B를 도입하고 사용하는 경우 구성 요소 A는 상위 구성 요소이고 구성 요소 B는 하위 구성 요소입니다.

구현 프로세스:

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

원리 다이어그램

상위 구성 요소 Footer.vue

상위 구성 요소의 하위 구성 요소 레이블에 대한 속성 사용자 정의

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

마이콘 .vue

하위 구성 요소에서 proppos를 사용하여 상위 구성 요소로부터 데이터를 수신합니다.

<template>
  <div>
    <h2>子组件</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>

작은 케이스에서는 상위-하위

상위 구성 요소 App.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h1>父组件</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>

하위 구성 요소 MyProduct.vue

를 사용합니다.

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

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

<style>
</style>

효과 표시

아들이 아버지에게

---

구현 과정

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

원리 설명

부모 구성 요소 App.vue

부모에 추가 형식 매개변수가 포함된 데이터를 수신하기 위해 구성요소의 하위 구성요소 레이블에 대한 이벤트 리스너

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

하위 구성요소 MyCon.vue

하위 구성요소에서 이 사용자 정의 청취 이벤트를 트리거합니다

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

제품 케이스는 다음을 사용합니다. child-to-father

부모 컴포넌트 App.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h1>父组件</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>

하위 컴포넌트 MyProduct.vue

<template>
  <div style="border: 1px solid #ccc; margin: 5px; padding: 5px">
    <h2>标题： {{ 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>

효과 표시

(동영상 공유 학습: 웹 프론트 엔드 개발 , 프로그래밍 기초 영상 )

위 내용은 Vue 상위 구성요소와 하위 구성요소 간에 통신하는 방법은 무엇입니까? (예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!