【Vue項目實踐】 Vue 元件之間互相傳遞參數

1. 父子元件調用

父頁面有一個 msg 為父元件傳給子元件的參數，@sendMsg 為接收子元件傳回的參數的方法

父頁面

<template>
  <div class="home">
    <TheWelcome msg="Home" @sendMsg="handle"></TheWelcome>
  </div>
</template>


<script>
  import TheWelcome from "../components/TheWelcome.vue"
  export default {
    name : "Home",
    components:{
      TheWelcome
    },
    setup(){
      const handle = value => {
        console.log("setup -> value",value)
      };
      return {
        handle
      }
    }
  }
</script>


      

2、 子元件 TheWelcome

點選按鈕的時候，觸發事件， emit 為送出事件

<template>
  <div class="hello">
    {{msg}}
    <input type="text" v-model="state.num1" >
    +
    <input type="text" v-model="state.num2" >
    =
    {{state.result}}
    <button type="button" @click="clickEvent()">event</button>
  </div>
</template>


<script>
  import {reactive,computed} from "vue"
  export default {
    name : "HelloWorld",
    props :{
      msg :String
    },
    setup(props,{emit}){
      console.log("props=",props)
      const state = reactive({
        num1:0,
        num2:0,
        result: computed(()=>parseInt(state.num1) + parseInt(state.num2))
      });
      const clickEvent = () => {
        console.log("click")
        emit('sendMsg',state.result)
      }
      return {
        state,clickEvent
      };
    }
  }
</script>