Vue父子组件的相互传值

父子组件传值

父组件Html部分

<div id="app" align="center">
    <br><br>
    <!-- :Msg="msg" 将父页面msg的值绑定给子组件的Msg -->
    <router-view :Msg="msg" @getSonParam="getSonParam" style="border: 1px solid red"/>
    <br><br>
    <!-- 初始值为空，直到子组件给sonParam赋值 -->
    {{sonParam}}
  </div>

父组件js部分

export default {
  name: 'App',
  data(){
    return{
      msg: '我是父组件的值',
      sonParam: '',
    }
  },
  methods:{
    // 子组件调用方法给sonParam赋值
    getSonParam(val){
      this.sonParam = val
    }
  }
}

子组件Html部分

<div align="center">
      <!-- 父组件传递的值 -->
      {{Msg}}
      <br><br>

      <br><br>
      <!-- 给父组件的属性赋值 -->
      <button @click="toFatherParam">给父组件传值</button>
    </div>

子组件js部分

export default {
  name: "FirstVueApp",
  props: ['Msg'],//用于接收父组件传递的属性值
  
  methods: {
    toFatherParam(){
      // 调用父组件内的方法
      this.$emit('getSonParam','我是子组件的值！')
    }
  }
}

测试结果

点击按钮结果