vue组件通信

前言

引用自vue.js官网：

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

组件化开发是vue非常重要的一个特征，组件是相互独立的，但是许多的组件需要结合在一起，才能组成我们的大型应用，在构建过程中，组件之间必须通过通信，也就是传参来实现页面的功能。

一、父传子

1.父组件

<template>
  <div class="box">
    <div class="father">
      <p>我是父组件</p>
    </div>
    <Son :list="list"></Son>
  </div>
</template>

<script>
import Son from "@/components/son/index.vue";
export default {
  components: { Son },
  data() {
    return {
      list: [
        { name: "zhangsan", age: 18 },
        { name: "lisi", age: 19 },
        { name: "wangwu", age: 20 },
      ],
    };
  },
};
</script>

<style scoped lang='scss'>
.box {
  width: 1200px;
  height: 500px;
  display: flex;
  justify-content: space-around;
}
.father {
  width: 45%;
  height: 100%;
  border: 1px solid skyblue;
  border-radius: 20px;
  p {
    text-align: center;
  }
}
</style>

2.子组件

<template>
  <div class="son">
    <p>我是子组件</p>
    <hr />
    <p>这些是父组件传过来的数组</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ index + 1 }}：{{ item.name }}-----{{ item.age }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["list"],
};
</script>

<style scoped lang='scss'>
.son {
  width: 45%;
  height: 100%;
  border: 1px solid pink;
  border-radius: 20px;
  p {
    text-align: center;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin: 10px 180px;
  }
  .el-button {
    margin: 30px 220px;
  }
}
</style>

---

二、子传父

1.父组件

<template>
  <div class="box">
    <div class="father">
      <p>我是父组件</p>
      <hr />
      <p>data变量Count是子组件传过来的值：{{ count }}</p>
    </div>
    <Son :count="count" @addCounts="addCounts"></Son>
  </div>
</template>

<script>
import Son from "@/components/son/index.vue";
export default {
  components: { Son },
  data() {
    return {
      count: 0
    };
  },
  methods: {
    addCounts(count) {
      this.count = count += 1;
    },
  },
};
</script>

<style scoped lang='scss'>
.box {
  width: 1200px;
  height: 500px;
  display: flex;
  justify-content: space-around;
}
.father {
  width: 45%;
  height: 100%;
  border: 1px solid skyblue;
  border-radius: 20px;
  p {
    text-align: center;
  }
}
</style>

2.子组件

<template>
  <div class="son">
    <p>我是子组件</p>
    <hr />
    <p>这个按钮是向父组件传值</p>
    <el-button type="primary" @click="addCount">Count++</el-button>
  </div>
</template>

<script>
export default {
  props: ["count"],
  methods: {
    addCount() {
      this.$emit("addCounts", this.count);
    },
  },
};
</script>

<style scoped lang='scss'>
.son {
  width: 45%;
  height: 100%;
  border: 1px solid pink;
  border-radius: 20px;
  p {
    text-align: center;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin: 10px 180px;
  }
  .el-button {
    margin: 30px 220px;
  }
}
</style>

---

三、完整代码

1.父组件

<template>
  <div class="box">
    <div class="father">
      <p>我是父组件</p>
      <hr />
      <p>data变量Count是子组件传过来的值：{{ count }}</p>
    </div>
    <Son :list="list" :count="count" @addCounts="addCounts"></Son>
  </div>
</template>

<script>
import Son from "@/components/son/index.vue";
export default {
  components: { Son },
  data() {
    return {
      count: 0,
      list: [
        { name: "zhangsan", age: 18 },
        { name: "lisi", age: 19 },
        { name: "wangwu", age: 20 },
      ],
    };
  },
  methods: {
    addCounts(count) {
      this.count = count += 1;
    },
  },
};
</script>

<style scoped lang='scss'>
.box {
  width: 1200px;
  height: 500px;
  display: flex;
  justify-content: space-around;
}
.father {
  width: 45%;
  height: 100%;
  border: 1px solid skyblue;
  border-radius: 20px;
  p {
    text-align: center;
  }
}
</style>

2子组件

<template>
  <div class="son">
    <p>我是子组件</p>
    <hr />
    <p>这些是父组件传过来的数组</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ index + 1 }}：{{ item.name }}-----{{ item.age }}
      </li>
    </ul>
    <hr />
    <p>这个按钮是向父组件传值</p>
    <el-button type="primary" @click="addCount">Count++</el-button>
  </div>
</template>

<script>
export default {
  props: ["list", "count"],
  methods: {
    addCount() {
      this.$emit("addCounts", this.count);
    },
  },
};
</script>

<style scoped lang='scss'>
.son {
  width: 45%;
  height: 100%;
  border: 1px solid pink;
  border-radius: 20px;
  p {
    text-align: center;
  }
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    width: 100%;
    height: 30px;
    line-height: 30px;
    margin: 10px 180px;
  }
  .el-button {
    margin: 30px 220px;
  }
}
</style>