Vue2 父子组件传值

1、父传子

通过自定义属性，v-bind+props

父组件代码：

<template>
  <!-- 父组件 -->
  <div>
    <Son :fatherName="fatherName"></Son>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  data() {
    return {
      fatherName: "父组件数据",
    };
  }
};
</script>

子组件代码：

<template>
<!-- 子组件 -->
  <div>
    <h3>{{ fatherName }}</h3>
  </div>
</template>

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

2、子传父

通过自定义事件，v-on + $emit

父组件代码：

<template>
  <!-- 父组件 -->
  <div>
    <h3>{{ fatherName }}</h3>
    <Son @CustomEvent="methodName"></Son>
  </div>
</template>

<script>
import Son from "./Son.vue";
export default {
  components: {
    Son,
  },
  data() {
    return {
      fatherName: "父组件数据",
    };
  },
  methods: {
    methodName(val) {
      this.fatherName = val;
    },
  },
};
</script>

子组件代码:

<template>
  <!-- 子组件 -->
  <div>
    <button @click="ChangeName">修改父组件数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "子组件数据",
    };
  },
  methods: {
    ChangeName() {
      this.$emit("CustomEvent", this.msg);
    },
  },
};
</script>