快捷導(dǎo)航

VUE3傳值相關(guān)的6種方法總結(jié)

更新時(shí)間：2023年04月25日 12:54:06 作者：風(fēng)兮梧桐

件間傳參是vue開(kāi)發(fā)過(guò)程中一個(gè)很常見(jiàn)的應(yīng)用,對(duì)于我們后端開(kāi)發(fā)來(lái)說(shuō),每次看到這種組件傳參的代碼就一頭霧水,下面這篇文章主要給大家介紹了關(guān)于VUE3傳值相關(guān)的6種方法,需要的朋友可以參考下

1.父?jìng)髯樱╬rops）

VUE3父?jìng)髯?/p>

1.將fatherToChild的值傳遞到index子組件之中并且在父組件中操作按鈕子組件數(shù)據(jù)會(huì)跟隨變化

  <div class="bgc fed">
    <div class="father">
      <p>我是父組件</p>
      <p>
        <button @click="changeFather">更改父組件數(shù)值</button>
      </p>
    </div>
 
    <index :fatherToChild="fatherToChild" />
  </div>

2.引入vue的import

import { defineComponent, ref, reactive, toRefs } from "vue";

3.const 所要傳遞的數(shù)據(jù)并且寫上父組件的按鈕方法

    const state = reactive({
      fatherToChild: "fatherToChild",
    });
    const changeFather = () => {
      state.fatherToChild = "changeFather";
    };
    return {
      ...toRefs(state),
      changeFather,
    };

如圖所示為一開(kāi)始傳遞fatherToChild在點(diǎn)擊按鈕之后傳遞數(shù)值變?yōu)閏hangeFather

4.在子組件之中接收所傳遞的props

export default {
  props: {
    fatherToChild: String,
  },
  setup(props) {
    return {
      props,
    };
  },
};

如果不確定傳值為什么可cons一下傳遞的props在控制臺(tái)觀察

在子組件中引用為

 <p>父組件給子組件傳值：{{ props.fatherToChild }}</p>

效果如圖所示

可以觀察到點(diǎn)擊父組件后子組件數(shù)值跟隨變化

2.子傳父組件方法和值（emit）

同VUE2一樣子組件沒(méi)有辦法直接更改父組件方法,選用context.emit進(jìn)行方法傳遞

1.子組件之中寫方法觸發(fā)context,emit

  setup(props, context) {
    const childChangeFather = () => {
      context.emit("childUseFather", "childUseFather");
    };
    return {
      props,
      childChangeFather,
    };
  },

context.emit(‘方法名’，數(shù)值)

2.父組件之中接收方法后調(diào)用更改數(shù)值

    const childUseFather = (val) => {
      state.fatherToChild = val;
    };

    <index 
        :fatherToChild="fatherToChild" 
        @childUseFather="childUseFather" />

效果如圖所示

點(diǎn)擊前

點(diǎn)擊后

3.子傳父（v-model）

如果子傳父所更改的值恰好跟父組件相同可用v-model

1.父組件之中

    <index v-model:fatherToChild="fatherToChild" />

不再需要使用@和：

2.子組件之中

    const modelChange = () => {
      context.emit("update:fatherToChild", "modelChangeFather");
    };

使用update方法，context.emit("update:方法名","傳值")

效果如圖所示

點(diǎn)擊前

點(diǎn)擊后

同時(shí)父組件更改數(shù)值子組件也會(huì)同樣跟隨變化

4.父組件調(diào)用子組件方法(ref)

就是使用 ref 來(lái)獲取dom 然后操作里面的參數(shù)和方法。

父組件之中

    <p><button @click="fatherUse">ref父組件調(diào)用子組件方法</button></p>
    <index ref="child" />

    const child = ref();
    const fatherUse = () => {
      child.value.fatherUseChild("fatherChangeChild");
    };

在組件上綁定ref,起名為child在調(diào)用時(shí)使用child.value.方法名（“傳值”）

子組件之中

    const state = reactive({
      children: "children",
    });
    // 父組件調(diào)用子組件方法并且進(jìn)行傳值更改
    const fatherUseChild = (val) => {
      console.log("調(diào)用成功");
      state.children = val;
    };

接收到傳值val，觸發(fā)方法給children重新賦值

效果如圖所示

點(diǎn)擊最后一個(gè)按鈕父組件調(diào)用時(shí)

可以觀察到子組件之中子組件的值變化為fatherChangeChild

5.VUEX

文件目錄結(jié)構(gòu)如圖所示

index.js之中

import { createStore } from 'vuex'
import {state} from './state'
import {mutations} from './mutations'
import {actions} from './actions'
export default createStore({
  state,
  mutations,
  actions,
  modules: {
  }
})

注意如果引入的時(shí)候沒(méi)寫{}在后續(xù)會(huì)導(dǎo)致store.state.字段找不到，需要store.state.state.字段才能查到數(shù)據(jù)，只有好不好用就不知道了= =

首先在state之中聲明一個(gè)count

const state = {
  count: 0,
}
export { state }

然后在頁(yè)面之中進(jìn)行引用時(shí)

<template>
  <div class="bgc fed">
    <div class="father">
      <p>我是父組件</p>
      <p>vuex中的數(shù)據(jù):{{ store.state.count }}</p>
      <child />
    </div>
  </div>
</template>
<script>
import child from "@/views/loginComponents/child.vue";
import { defineComponent } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  components: {
    child,
  },
  name: "index",
  setup() {
    const store = useStore();
    return {
      store,
    };
  },
});
</script>
<style scoped>
.father {
  height: 600px;
  width: 200px;
  background: rgb(255, 199, 146);
  margin: 0 auto;
}
</style>

可以通過(guò)console一下store來(lái)觀察數(shù)據(jù)是什么

如果想要對(duì)數(shù)據(jù)進(jìn)行更改需要在mutations文件中進(jìn)行操作

const mutations = {
  addCount(state, payload) {
    state.count += payload
  },
  changeCount(state, payload) {
    state.count = payload
  }
}
export { mutations }

如圖為遞增和值替換兩種方法

    const changeState = () => {
      store.commit("addCount", 1);
    };

使用的時(shí)候直接store.commit即可

效果如圖所示

每次點(diǎn)擊遞增1

如果想要進(jìn)行異步操作的話在actions文件中調(diào)用mutations方法來(lái)實(shí)現(xiàn)

const actions = {
  asyncAddStoreCount(store, payload) { // 第一個(gè)參數(shù)是vuex固定的參數(shù)，不需要手動(dòng)去傳遞
    store.commit("addCount", payload)
  },
}
export { actions }

使用的時(shí)候

    const asyncChangeStoreCount = () => {
      setTimeout(() => {
        // asyncAddStoreCount是mutations中的方法，2是傳遞過(guò)去的數(shù)據(jù)
        // 異步改變vuex用dispatch方法，這里用setTimeout模擬異步操作
        store.dispatch("asyncAddStoreCount", 2);
      }, 1000);
    };

用一個(gè)計(jì)時(shí)器模擬一下

效果圖如圖所示