父子组件之间的传参

1.父组件

<div>父组件</div>

2.子组件

<div>子组件</div>

3.父组件给子组件传参

------------------父组件
<template>
<!-- 通过:msgA=""给子组件传值 -->
  <div :msgA="msg">父组件</div>
</template>
<script>
export default {
  data() {
    msg: "hello world";//给子组件传的值
  },
};
</script>



-------------------子组件
<template>
<!-- 通过props接受值后可直接使用 -->
  <div>子组件{{msgA}}</div>
</template>
<script>
export default {
    // 子组件通过props接收父组件传来的值
  props: {
      //父组件传来的值需定义一下
    msgA: {
      type: String, //类型
    },
  },
  data() {},
};
</script>

4.子组件给父组件传值

------------------------子组件
<template>
  <div>子组件</div>
</template>
<script>
export default {
  data() {
    msg: "将要传给父组件的值";
  },
  created() {
    this.toFather();
  },
  methods: {
    toFather() {
      //   子组件通过$emit将data中的msg传递给父组件中的msgB事件
      this.$emit("msgB", this.msg);
    },
  },
};
</script>
-------------------------父组件
<template>
  <!-- 父组件通过子组件定义好的msgB触发父组件中的msgA获取传来的值 -->
  <div @msgB="msgA">父组件</div>
</template>
<script>
export default {
  data() {
    msg: "";
  },
  methods: {
    msgA(data) {
      this.msg = data; //这是子组件给父组件传来的值
    },
  },
};
</script>