Vue组件通信

一、父子间通信

1、父组件給子组件传数据

利用props传数据
父组件

<template>
  <div id="app">
    <Student :age="1" />
  </div>
</template>

<script>
import Student from "./components/Student";

export default {
  name: "App",
  components: {
    Student,
  },
};
</script>

<style>
</style>

子组件通过props接收数据

<template>
  <div>
    <h1>学生信息</h1>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>
<script>
export default {
  name: "Student",
  data() {
    return {
      name: "冰墩墩",
    };
  },
  props: ["age"], 
};
</script>

2、子组件給父组件传数据

1.通过props，父组件传一个函数，子组件调用函数把数据带过去

父组件

<template>
  <div id="app">
    <Test :receiveName="receiveName" />
  </div>
</template>

<script>
import Test from "./components/Test";

export default {
  name: "App",
  components: {
    Test,
  },
  methods: {
    receiveName(name) {
      console.log("接收回来的参数", name);
    },
  },
};
</script>

子组件

<template>
  <button @click="sendParams">点我传参数</button>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      name: "你好啊！",
    };
  },
  props: ["receiveName"],
  methods: {
    sendParams() {
      this.receiveName(this.name);
    },
  },
};
</script>

2. 通过父组件給子组件绑定一个自定义事件

父组件

<template>
  <div id="app">
    <!-- 通过v-on绑定事件 -->
    <!-- <Test v-on:sendName="receiveName" /> -->

    <!-- 通过@绑定事件 -->
    <!-- <Test @sendName="receiveName" /> -->

    <!-- 通过ref在mounted生命周期去绑定事件 -->
    <Test ref="test" />
  </div>
</template>

<script>
import Test from "./components/Test";

export default {
  name: "App",
  components: {
    Test,
  },
  methods: {
    receiveName(name) {
      console.log("接收回来的参数", name);
    },
  },
  mounted() {
    this.$refs.test.$on("sendName", this.receiveName);
  },
};
</script>

子组件

<template>
  <button @click="sendParams">点我传参数</button>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      name: "你好啊！",
    };
  },
  methods: {
    sendParams() {
      this.$emit("sendName", this.name);
    },
  },
};
</script>

二、事件总线

• 第一步 在Vue上绑定一个$bus 让所有组件都能访问到

import Vue from "vue";
import App from "./App.vue";
// 关闭vue的生产提示
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this;
  },
}).$mount("#app");

• 需要接收数据的组件绑定事件

<template>
  <div class="school">
    <h1>学校信息</h1>
    <h2 v-show="name">接收到{{ name }}的问好</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "",
    };
  },
  mounted() {
    this.$bus.$on("seeHai", (data) => {
      this.name = data;
    });
  },
  beforeDestory() {
    this.$bus.$off("seeHai");// 解绑事件
  },
};
</script>
<style scoped>
.school {
  width: 100%;
  height: 200px;
  background: burlywood;
}
</style>

通过emit去触发事件并带上传递的数据

<template>
  <div class="student">
    <h1>学生信息</h1>
    <button @click="seeHai">向学校问好</button>
  </div>
</template>
<script>
export default {
  name: "Student",
  data() {
    return {
      name: "张三岁",
    };
  },
  methods: {
    seeHai() {
      this.$bus.$emit("seeHai", this.name);
    },
  },
};
</script>
<style scoped>
.student {
  width: 100%;
  height: 100px;
  background: yellowgreen;
}
</style>

点击按钮之后就能在School组件中收到传递的数据