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

父组件向子组件传值和方法

在components创建一个poster组件

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

<script>export default {
  name: "poster",
  data() {
    return {};
  },
  props: {
    title: {
      type: String,
      default: "",
    },
    msg: {
      type: String,
      default: "",
    },
    getrun: Function,
  },
  mounted() {
    this.getrun();
    console.log(this.title);
    this.$emit('update:msg','修改后的msg的值') //修改父组件msg
  },
  methods: {}
};</script>

创建一个父组件home，把子组件引入到父组件中去

<template>
  <div class="home">
    <poster title="父组件标题" :msg.sync="msg" :getrun="getFa" />
  </div>
</template>

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

export default {
  name: "home",
  components: {
    poster
  },
  data(){
    return{
      msg:"可以让子组件修改父组件传递的值"
    }
  }
  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>