项目题全解：组件通信—下-灵析社区

Step 2：平行组件通信

Step 2.1：提供三个组件的基础模板

页面效果

基础代码

student1（A）组件

<template>
  <div>
    <h2>平行组件之间通信</h2>
    <button>Student1</button>
    <hr />
  </div>
</template>

<script>
export default {
  name: "StudentA",
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped></style>

student2（B）组件

<template>
  <div>
    <p>这是子组件学生2</p>
    <p></p>
  </div>
</template>

<script>
export default {
  name: "StudentB",
  data() {
    return {};
  },
};
</script>

<style scoped></style>

App组件

<template>
  <div>
    <StudentA></StudentA>
    <StudentB></StudentB>
  </div>
</template>

<script>
import StudentA from "./components/Student1";
import StudentB from "./components/Student2";

export default {
  name: "App",
  // 引入的组件需要在 components 里面注册
  components: { StudentB, StudentA },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style scoped></style>

Step 2.2：student1 向 App 子向父传值

基础步骤

第一步： 在 stuedent1 中添加点击事件 <button @click="toApp()">Student1</button>

第二步：

添加传递的数字

data() {
    return {
      count: 70,
    };
  },

第三步：

使用emit进行传递

methods: {
    toApp() {
      this.$emit("getApp", 70);
    },
  },

具体代码：

student1（A）组件

<template>
  <div>
    <h2>平行组件之间通信</h2>
    <button @click="toApp()">Student1</button>
    <hr />
  </div>
</template>

<script>
export default {
  name: "StudentA",
  data() {
    return {
      count: 70,
    };
  },
  methods: {
    toApp() {
      this.$emit("getApp", 70);
    },
  },
};
</script>

<style scoped></style>

Step 2.3：App 接收传值

基础步骤

第一步： 接受 sutdent1 的值 <StudentA @getApp="receiveApp"></StudentA>

第二步：把原来的 count 加上传过来的 count

data() {
    return {
      count: 5,
    };
  },
  methods: {
    receiveApp(num) {
      this.count += num;
    },
  },

第三步：在 receiveApp 添加 console.log 打印查看效果

console.log("原来+现在", this.count);

效果展示:

具体代码：

App组件

<template>
  <div>
    <StudentA @getApp="receiveApp"></StudentA>
    <StudentB ></StudentB>
  </div>
</template>

<script>
import StudentA from "./components/Student1";
import StudentB from "./components/Student2";

export default {
  name: "App",
  components: { StudentB, StudentA },
  data() {
    return {
      count: 5,
    };
  },
  methods: {
    receiveApp(num) {
      this.count += num;
      console.log("原来+现在", this.count);
    },
  },
};
</script>

<style scoped></style>

Step 2.4：App 向 student2 传值

基础步骤

第一步： 传给 sutdent2 的值 <StudentB :toStudentB="count"></StudentB>

代码展示：

App 组件

<template>
  <div>
    <StudentA @getApp="receiveApp"></StudentA>
    <StudentB :toStudentB="count"></StudentB>
  </div>
</template>

<script>
import StudentA from "./components/Student1";
import StudentB from "./components/Student2";

export default {
  name: "App",
  components: { StudentB, StudentA },
  data() {
    return {
      count: 5,
    };
  },
  methods: {
    receiveApp(num) {
      this.count += num;
      console.log("原来+现在", this.count);
    },
  },
};
</script>

<style scoped></style>

Step 2.5：Student2 接受传值

基础步骤

第一步： 添加 props 接受参数 props: ["toStudentB"]

第二步：接收值并展示 <p>{{ toStudentB }}</p>

效果展示

Step 2.6：最终实现

具体代码：

student1（A）组件

<template>
  <div>
    <h2>平行组件之间通信</h2>
    <button @click="toApp()">Student1</button>
    <hr />
  </div>
</template>

<script>
export default {
  name: "StudentA",
  data() {
    return {
      count: 70,
    };
  },
  methods: {
    toApp() {
      this.$emit("getApp", 70);
    },
  },
};
</script>

<style scoped></style>

student2（B）组件

<template>
  <div>
    <p>这是子组件学生2</p>
    <p>{{ toStudentB }}</p>
  </div>
</template>

<script>
export default {
  name: "StudentB",
  data() {
    return {};
  },
  props: ["toStudentB"],
};
</script>

<style scoped></style>

App 组件

<template>
  <div>
    <StudentA @getApp="receiveApp"></StudentA>
    <StudentB :toStudentB="count"></StudentB>
  </div>
</template>

<script>
import StudentA from "./components/Student1";
import StudentB from "./components/Student2";

export default {
  name: "App",
  components: { StudentB, StudentA },
  data() {
    return {
      count: 5,
    };
  },
  methods: {
    receiveApp(num) {
      this.count += num;
      console.log("原来+现在", this.count);
    },
  },
};
</script>

<style scoped></style>

点赞 评论 收藏 目录

阅读量：2024

点赞量：0

收藏量:0