Vue父子组件传值

1.在Vue项目目录下的src文件夹下的components文件夹中新建一个Childvue文件

2.在所需页面引用（这里我在Home.vue里引用了）

以下为Home.vue文件

<template>
  <div class="home">
    <Child :msg="msg" />
    <!-- :msg意为给子组件传data中的msg,也就是123 -->
  </div>
</template>

<script>
// @ is an alias to /src
import Child from "../components/Child"; //引入子组件
export default {
  data() {
    return {
      msg: "123",
    };
  },
  components: { Child },//注册组件
  created() {
    //Vue的生命周期，意为实例已经创建完成之后被调用
  },
};
</script>

以下为Child.vue文件

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

<script>
export default {
  props: ["msg"], //在子组件中接收父组件中传过来的值
  data() {
    return {};
  },

  methods: {},
  created() {
    //Vue的生命周期，意为实例已经创建完成之后被调用
    console.log(this.msg);
  },
};
</script>
<style lang="less" scoped></style>

此时，子组件已经接收到了父组件传过来的值

那么问题来了，子往父反值应该怎么做？

1.首先，在子组件Child.vue中加一个事件，比如我加一个点击事件

<template>
  <div @click="transmit">
    child
  </div>
</template>

<script>
export default {
  props: ["msg"], //在子组件中接收父组件中传过来的值
  data() {
    return {
      arr: [1, 2, 3, 4],
    };
  },

  methods: {
    transmit() {
      this.$emit("finish", this.arr);
      //使用this.$emit绑定自定义事件 两个参数，第一个参数为自定义事件名,第二个参数为需要传递的值
    },
  },
  created() {
    //Vue的生命周期，意为实例已经创建完成之后被调用
    console.log(this.msg);
  },
};
</script>
<style lang="less" scoped></style>

接下来在父组件Home.vue内定义自定义事件，我在这里用的时finish，大家可以随意定义，与this.$emit()里的事件名保持一致即可

<template>
  <div class="home">
    <Child :msg="msg" @finish="finish" />
    <!-- :msg意为给子组件传data中的msg,也就是123 -->
  </div>
</template>

<script>
// @ is an alias to /src
import Child from "../components/Child"; //引入子组件
export default {
  data() {
    return {
      msg: "123",
    };
  },
  components: { Child }, //注册组件
  methods: {
    finish(e) {
      console.log(e);
    },
  },
  created() {
    //Vue的生命周期，意为实例已经创建完成之后被调用
  },
};
</script>

此时页面如下

当我们点击child的文字时,结果如下

可以看到，子组件中的data中定义的arr被传递到了父组件并输出了出来