淺談Vue3 父子傳值

更新時(shí)間：2021年10月13日 15:37:10 作者：未飛

這篇文章主要介紹了基于Vue中的父子傳值問(wèn)題解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

父?jìng)髯樱?/h2>

1、在父組件的子組件標(biāo)簽上通過(guò) :傳遞到子組件的數(shù)據(jù)名="需要傳遞的數(shù)據(jù)"

在這里為了大家區(qū)分我將父組件中的數(shù)據(jù)定義為： fatherData ，

子組件需要接收的數(shù)據(jù)定義為： sonData 。

// 父組件
<template>
  <div class="about">
    {{fatherData}}
    <!-- 父?jìng)髯?-->
    <!-- 1、 在父組件的子組件標(biāo)簽上通過(guò) :傳遞到子組件的數(shù)據(jù)名="需要傳遞的數(shù)據(jù)" -->
    <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、子組件依舊通過(guò) props 來(lái)接收并且在模版中使用

那么大多數(shù)情況下都會(huì)去通過(guò)父組件傳遞到子組件中的數(shù)據(jù)，根據(jù)這個(gè)數(shù)據(jù)去做一些特定的功能或者請(qǐng)求數(shù)據(jù)等等。

在 setup 鉤子中第一個(gè)參數(shù) props 就可以訪問(wèn)到父組件傳遞的數(shù)據(jù)，那么在函數(shù)中也是通過(guò)： props.父組件傳遞數(shù)據(jù)的名稱來(lái)操作該數(shù)據(jù)。

setup函數(shù)接收props作為其第一個(gè)參數(shù)，props對(duì)象是響應(yīng)式的(單向的父—>子)，watchEffect或watch會(huì)觀察和響應(yīng)props的更新。不要對(duì)props對(duì)象進(jìn)行解構(gòu)，那樣會(huì)失去響應(yīng)性。在開(kāi)發(fā)過(guò)程中，props對(duì)象對(duì)用戶空間代碼時(shí)不可變的，用戶嘗試修改props時(shí)會(huì)觸發(fā)警告。

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

子傳父：

1、子組件觸發(fā)事件通過(guò) setup 的第二個(gè)參數(shù) context.emit 來(lái)實(shí)現(xiàn)子傳父

context 上下文對(duì)象。

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

context 也可以使用結(jié)構(gòu)的形式這樣寫

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