父子组件传值

父传子props直接上代码！

父组件中html部分

<template>
  <div>
    <children :msg="123"></children>
  </div>
</template>

父组件中js部分

import children from "../table/index.vue";
export default {
  components: {
    children,
  },
};

子组件中的html部分

<template>
  <div>{{msg}}</div>
</template>

子组件中的js部分

export default {
  props:{
    msg:{}
  },
};

子传父$emit直接上代码！

子组件中的html部分

<template>
  <button @click="pushMsg()">子传父</button>
</template>

子组件中的js部分

export default {
	methods: {
	    pushMsg(){
	      this.$emit("showMsg", "这是子组件===>父组件的值");
	    },
	},
};

父组件中的html部分

<children :msg="123" @showMsg="getChild"></children>
<h5>{{childrenzhi}}</h5>

父组件中的js部分

import children from "../table/index.vue";
export default {
  components: {
    children,
  },
  data() {
    return {
      childrenzhi:'',
    };
  },
  methods: {
    getChild(val) {
      this.childrenzhi = val
    },
  },
};