淺談Vue3 父子傳值

Posted on by

父傳子：

1、 在父組件的子組件標簽上通過 :傳遞到子組件的數據名=”需要傳遞的數據”

在這裡為瞭大傢區分我將父組件中的數據定義為 ： fatherData  ，

子組件需要接收的數據定義為： sonData 。

// 父組件
<template>
  <div class="about">
    {{fatherData}}
    <!-- 父傳子 -->
    <!-- 1、 在父組件的子組件標簽上通過 :傳遞到子組件的數據名="需要傳遞的數據" -->
    <children :sonData="fatherData"></children>
  </div>
</template>
 
<script>
import children from "@/components/children"
import { defineComponent,reactive,toRefs } from "vue";
export default defineComponent({
  components:{
    children,
  },
name:"about",
setup(){
  const state = reactive({
    fatherData:"hello"
  })
  return {
    ...toRefs(state)
  }
}
 
})
</script>

2、子組件依舊通過 props 來接收並且在模版中使用

那麼大多數情況下都會去通過父組件傳遞到子組件中的數據，根據這個數據去做一些特定的功能或者請求數據等等。

在 setup 鉤子中第一個參數 props 就可以訪問到父組件傳遞的數據，那麼在函數中也是通過：  props.父組件傳遞數據的名稱   來操作該數據。

setup函數接收props作為其第一個參數，props對象是響應式的(單向的父—>子)，watchEffect或watch會觀察和響應props的更新。不要對props對象進行解構，那樣會失去響應性。在開發過程中，props對象對用戶空間代碼時不可變的，用戶嘗試修改props時會觸發警告。

// 子組件
<template>
  <div class="children">
    <!-- 3、在子組件模版中使用 -->
    {{sonData}}
  </div>
</template>
<script>
export default {
name:"Children",
// 2、子組件通過 props 來接收
  props:["sonData"],
  setup(props){
    function childrenbut(){
      // props.sonData  可以訪問到父組件傳遞的數據
      console.log(props.sonData);
    }
    return {
      childrenbut
    }
  }
}
</script>

子傳父：

1、子組件觸發事件通過 setup 的第二個參數 context.emit 來實現子傳父 

context 上下文對象。

// 子組件
<template>
  <div class="children">
    {{sonData}}
    <!-- 1、觸發事件 -->
    <button @click="childrenbut">子組件按鈕</button>
  </div>
</template>
<script>
export default {
name:"Children",
  setup(props,context){
    function childrenbut(){
      console.log(context);
      // 2、通過context.emit 實現子傳父
      // 第一個參數為 方法名，第二個參數為 需要傳遞的數據
      context.emit("change",'world')
    }
    return {
      childrenbut,
    }
  }
}
</script>

context 也可以使用結構的形式這樣寫

// 子組件
<script>
export default {
name:"Children",
  // 通過結構 之後直接寫 emit {emit}
  setup(props,{emit}){
    function childrenbut(){
      // 省去 context.emit
      emit("change",'world')
    }
    return {
      childrenbut,
    }
  }
}
</script>

總結

在 vue3 中無論是父傳子還是子傳父其實與 vue2 中都相差無幾，

思想大多一樣，不一樣的是 vue3 需要通過調用各種各樣的鉤子來實現傳參

推薦閱讀：