VUE父傳子，子傳父

关键步就几步發表於2024-07-18
Vue

父傳子，子傳父，本質上都是父親傳遞給兒子，只不過如果想要兒子回傳資料，那麼父親就事先傳遞個自己的方法給兒子，兒子接收到這個方法，進行呼叫，把值傳給父親

父：

<template>
  <div class="father">
    <h3>父元件</h3>
        車： {{car}}
        <!-- 父傳子在子元件上透過屬性繫結要傳遞值carFromFather -->
         <Child :carFromFather="car" :sonSendToyToFather="getToyFromSon"/>
        <!-- 子傳父實際上是子元件觸發父元件中事先定義好的方法，同樣是透過屬性繫結進行互動 -->
        <h3 v-if="toy">兒子給的玩具：{{toy}}</h3>
  </div>
</template>

<script setup lang="ts" name="Father">
 import Child from "./Child.vue";
 import { ref } from 'vue'
 let car=ref('賓士')
 let toy=ref()

 //子傳父，提前定義好方法，
 //子傳父的本質還是把父定義的方法傳遞給子，子接收到函式後呼叫一下，透過父的函式把資料傳遞給父
function getToyFromSon(value:string){
   toy.value=value
}

</script>

<style scoped>
    .father{
        background-color:rgb(165, 164, 164);
        padding: 20px;
        border-radius: 10px;
    }
</style>

子：

<template>
  <div class="child">
    <h3>子元件</h3>
    玩具：{{toy}} <br/>
    父給的車： {{carFromFather}} <br/>
    <!-- <input type="button" @click="sonSendToyToFather" value="把玩具給父親"> -->
    <button @click="sonSendToyToFather(toy)">把玩具給父親</button>
  </div>
</template>

<script setup lang="ts" name="Child">
  import { ref } from 'vue'
 let toy=ref('奧特曼')
 //父傳子接收用defineProps接收繫結的同名屬性值來，接收的可以是值，也可以是方法
 defineProps(["carFromFather","sonSendToyToFather"])

 
</script>

<style scoped>
    .child{
        background-color: skyblue;
        padding: 10px;
        box-shadow: 0 0 10px black;
        border-radius: 10px;
    }
</style>

相關文章