vue的父子传值方法：
子传父：

子组件使用this.$emit（"自定义事件名"，需要传的数据）
父组件使用 @自定义事件名="自定义的方法名"

例如：

//子组件
<template>
  <div>
    <button @click="topro">子传父</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "子组件数据",
    };
  },
  methods: {
    topro() {
      this.$emit("toParent", this.msg);
    },
  },
};
</script>
//父组件
<template>
  <div class="hello">
    <Child @toParent="promet"></Child>
  </div>
</template>
<script>
import Child from "@/components/child.vue";
export default {
  name: "HelloWorld",
  components: {
    Child,
  },
  methods: {
    promet() {
      console.log(this.$refs.Child.msg);
    },
  }
};
</script>

父传子：

在父组件中使用 :自定义数据名="需要传的数据"
在子组件中使用props来接收
方法一：
props：{
      自定义数据名：数据类型
 }
props:{
      msg:Number
}
方法二：
props:['自定义数据名']
props：['msg']

例如：

//父组件
<template>
  <div class="hello">
    <Child :msg="123" ></Child>
  </div>
</template>
<script>
import Child from "@/components/child.vue";
export default {
  name: "HelloWorld",
  components: {
    Child,
  }
};
</script>
//子组件
<template>
  <div>
    <p>{{ msg }}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
    };
  },
  props: {
    msg: Number,
  },
};
</script>

父组件调用子组件的方法：

//在子组件中定义一个方法
<script>
export default {
methods: {
    ale() {
      alert("111111111111");
    }
  },
};
</script>
//父组件
<template>
  <div class="hello">
    <Child ref="Child"></Child>
    <button @click="tap">调用子组件方法</button>
  </div>
</template>
<script>
import Child from "@/components/child.vue";
export default {
  name: "HelloWorld",
  components: {
    Child,
  },
  methods: {
    tap() {
      this.$refs.Child.ale();
    },
  },
};
</script>