Vue中prop与emit

• prop： 父组件的数据需要通过 props 把数据传给子组件。prop是单向绑定的，当父组件的属性变化时，将传递给子组件，但是反过来不行；这样主要是防止子组件无意修改父组件的状态；每次父组件更新时，子组件的所有prop都会更新为最新值。这意味着你不能在子组件内部改变prop。

<template>
  <div class="HelloWorld">
  我是父组件：
  <input v-model="firstName" />
  <child_a :parentData="firstName"></child_a>
 </div>
</template>
<script>
import child_a from "../components/childA";
export default {
 data() {
  return {
   firstName: ""
  };
 },
 components: {
  child_a
 }
};
</script>

<template>
  <div class="childA">
    <p>我是子组件：{{ parentData }}</p>
  </div>
</template>

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

<style scoped></style>

• emit： this.$emit( event, arg )：发送数据，第一个参数是发送数据的名称，接收时还用这个参数接收，第二个参数是这个数据现在的位置 。

<template>
  <div class="HelloWorld">
    <child_a @clickEvent="showData"></child_a>
    <p>我是父组件：{{ msg }}</p>
  </div>
</template>

<script>
import child_a from "../components/childA";
export default {
  data() {
    return {
      msg: ""
    };
  },
  components: {
    child_a
  },
  methods: {
    showData(data) {
      this.msg = data;
    }
  }
};
</script>

<style scoped lang="less"></style>

<template>
  <div class="childA">
    我是子组件：
    <input value="sendDataToParent" type="button" @click="clickEvent" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "子组件把值传给父组件"
    };
  },
  methods: {
    clickEvent() {
      this.$emit("clickEvent", this.firstName);
    }
  }
};
</script>

<tyle scoped></style>