vue中父子组件的传值(父传子、子传父)

首先需要给两个页面配置路由，配置结束后如下：

   {
    path: '/',
    name: 'Father',
    component:()=>import('@/views/admin/Father.vue'),
  },
  {
    path: '/son',
    name: 'Son',
    component:()=>import('@/views/admin/Son.vue'),
  },

父组件：

<template>
  <div>
    <h1>父组件</h1>
    <h1>{{msg}}</h1>
    <Son msg="我来自于父组件" @showMsg='showMsg'></Son>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  data(){
    return {
      msg :'',
    }
  },
  components: {
    Son
  },
   methods:{
     showMsg(val){
       this.msg = val
     }
   }
}
</script>

<style>

</style>

子组件：

<template>
  <div>
    <h2>子组件</h2>
    <h3>{{ msg }}</h3>
    <h3>{{ msgs }}</h3>
    <el-button type="primary" @click="passMsg">传值给父</el-button>
  </div>
</template>

<script>
export default {
    data() {
        return{ 
        }
    },
  props: {
    msg: {
      type: String,
      default: "",
    },
    msgs: {
      type: String,
      default: "",
    },
  },
  methods: {
    passMsg() {
      this.$emit('showMsg','我来自子组件');
    },
  },
};
</script>

<style>
</style>