淺談Vue3 父子傳值

阿新 • • 發佈：2021-10-15

父傳子：

1、在父元件的子元件標籤上通過 :傳遞到子元件eqSxsERmO的資料名="需要傳遞的資料"

在這裡為了大家區分我將父元件中的資料定義為： fatherData ，

子元件需要接收的資料定義為： sonData 。

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

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

那麼大多數情況下都會去通過父元件傳遞到子元件中的資料，根據這個資料去做一些特定的功能或者請求資料等http://www.cppcns.com等。

在 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",eqSxsERmO'world')
    }
    return {
      childrenbut,}
  }
}
</script>