Vue使用props和emit父子组件通信

<template>
  <div></div>
</template>

<script>
export default {
  name: "poster",
  data() {
    return {};
  },
  props: ["title", "getrun"], //title用来接收值，getrun接收方法
  mounted() {
    this.getrun();
    console.log(this.title);
  },
  methods: {}
};
</script>

<template>
  <div class="home">
    <poster :title="title" :getrun="getFa" />
  </div>
</template>

<script>
import poster from "@/components/poster.vue";

export default {
  name: "home",
  components: {
    poster
  },
  data() {
    return {
      title: "父组件传给子组件的值"
    };
  },
  methods: {
    getFa() {
      console.log("父组件传给子组件的方法");
    }
  }
};
</script>

<template>
  <div>
    <button @click="getSon()">子组件向父组件通信</button>
  </div>
</template>

<script>
export default {
  name: "poster",
  data() {
    return {
      sonMsg: "这是子组件的值"
    };
  },
  mounted() {},
  methods: {
    getSon() {
      this.$emit("son", [this.sonMsg, "传递多个值"]);
    }
  }
};
</script>

<template>
  <div class="home">
    <poster @son="getSon" />
  </div>
</template>

<script>
import poster from "@/components/poster.vue";

export default {
  name: "home",
  components: {
    poster
  },
  data() {
    return {};
  },
  methods: {
    getSon(e) {
      console.log(e);
    }
  }
};
</script>