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','我是子元件的值！')
    }
  }
}
           

測試結果

點選按鈕結果