Vue?組件之間傳值的主要方法

更新時(shí)間：2023年12月06日 10:16:46 作者：憂郁的蛋~

父組件向子組件傳值，使用 props：可以通過(guò)在子組件上綁定 props，然后在父組件中通過(guò) v-bind 綁定相應(yīng)的數(shù)據(jù)來(lái)傳遞數(shù)據(jù)，這篇文章主要介紹了Vue?組件之間傳值的方法,需要的朋友可以參考下

一、Vue 組件之間傳值的主要方法

Vue 3 對(duì)于組件之間傳遞值的基本思想與 Vue 2 相似，但是有一些語(yǔ)法和 API 上的改變，主要的傳值方法有以下幾種：

1、父組件向子組件傳值，使用 props：可以通過(guò)在子組件上綁定 props，然后在父組件中通過(guò) v-bind 綁定相應(yīng)的數(shù)據(jù)來(lái)傳遞數(shù)據(jù)。

2、子組件向父組件傳值，使用 $emit：可以通過(guò)在子組件中使用 $emit 觸發(fā)自定義事件，并在父組件中使用 v-on 監(jiān)聽相應(yīng)的事件來(lái)傳遞數(shù)據(jù)。

3、兄弟組件之間傳值：可以通過(guò)使用一個(gè)共同的父組件，然后將需要共享的數(shù)據(jù)放在父組件的 data 中，再通過(guò) props 將數(shù)據(jù)傳遞給各自的子組件。

4、跨級(jí)組件傳值，使用 provide 和 inject（同樣適用于父子組件傳值）：provide 可以在祖先組件中定義一個(gè)值或者方法，然后在子孫組件中使用 inject 來(lái)注入這個(gè)值或者方法。

5、使用全局事件總線：可以使用 Vue 的事件機(jī)制，通過(guò)在 Vue 實(shí)例上使用 $on 來(lái)監(jiān)聽事件，然后在其他組件中使用 $emit 觸發(fā)相應(yīng)的事件來(lái)傳遞數(shù)據(jù)。這種方式可以在任意組件之間傳遞數(shù)據(jù)。

6、使用 Vuex：當(dāng)應(yīng)用的數(shù)據(jù)狀態(tài)比較復(fù)雜或者需要在多個(gè)組件之間共享時(shí)，可以使用 Vuex，它是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式?？梢栽谌魏谓M件中訪問(wèn)和修改 Vuex 存儲(chǔ)的數(shù)據(jù)，通過(guò) mutations 來(lái)修改狀態(tài)，通過(guò) actions 來(lái)觸發(fā) mutations。這種方式可以方便地在不同的組件中進(jìn)行狀態(tài)管理和數(shù)據(jù)共享。

7、使用 $attrs 和 $listeners，$attrs 和 $listeners 是常用的兩個(gè)特殊屬性，它們可以用來(lái)向組件傳遞屬性和事件監(jiān)聽器。

8、使用 $refs：可以使用 Vue 提供的 $refs 屬性來(lái)獲取組件實(shí)例，然后通過(guò)調(diào)用組件的方法來(lái)進(jìn)行數(shù)據(jù)傳遞。這種方式不推薦使用，因?yàn)椴灰拙S護(hù)和調(diào)試。

9、使用事件總線庫(kù)：可以使用 Vue.js 的第三方庫(kù)如 Event Bus、Tiny-Emmiter 等來(lái)傳遞數(shù)據(jù)。這些庫(kù)提供了一種方便、簡(jiǎn)單的方式來(lái)在不同的組件之間進(jìn)行事件傳遞。但是需要注意，使用第三方庫(kù)可能會(huì)增加項(xiàng)目的復(fù)雜性和維護(hù)成本。

二、Vue 2 組件之間傳值示例代碼

父組件中的代碼：

<template>
  <div>
    <child-component :prop-a="dataA"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      dataA: 'data from parent',
    };
  },
};
</script>

子組件中的代碼：

<template>
  <div>
    {{ propA }}
  </div>
</template>
<script>
export default {
  props: {
    propA: String,
  },
};
</script>
<template>
  <div>
    {{ propA }}
  </div>
</template>
<script>
export default {
  props: {
    propA: String,
  },
};
</script>

子組件中的代碼：

<template>
  <div>
    <button @click="sendDataToParent">Send Data To Parent</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataB: 'data from child',
    };
  },
  methods: {
    sendDataToParent() {
      this.$emit('send-data', this.dataB);
    },
  },
};
</script>

父組件中的代碼：

<template>
  <div>
    <child-component @send-data="receiveDataFromChild"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent,
  },
  methods: {
    receiveDataFromChild(dataB) {
      console.log(dataB);
    },
  },
};
</script>

父組件中的代碼：

<template>
  <div>
    <child-a :prop-a="dataA"></child-a>
    <child-b :prop-b="dataB"></child-b>
  </div>
</template>
<script>
import ChildA from './ChildA.vue';
import ChildB from './ChildB.vue';
export default {
  components: {
    ChildA,
    ChildB,
  },
  data() {
    return {
      dataA: 'data from parent to child a',
      dataB: 'data from parent to child b',
    };
  },
};
</script>

子組件 A 中的代碼：

<template>
  <div>
    {{ propA }}
  </div>
</template>
<script>
export default {
  props: {
    propA: String,
  },
};
</script>

子組件 B 中的代碼：

<template>
  <div>
    {{ propB }}
  </div>
</template>
<script>
export default {
  props: {
    propB: String,
  },
};
</script>

4、跨級(jí)組件傳值，使用 provide 和 inject（該方法也可用于父子組件傳值）：provide 可以在祖先組件中定義一個(gè)值或者方法，然后在子孫組件中使用 inject 來(lái)注入這個(gè)值或者方法。

祖先組件中的代碼：

<template>
  <div>
    <child-a></child-a>
  </div>
</template>
<script>
import ChildA from './ChildA.vue';
export default {
  components: {
    ChildA,
  },
  provide() {
    return {
      sharedData: 'data from ancestor',
    };
  },
};
</script>

子孫組件 A 中的代碼：

<template>
  <div>
    {{ sharedData }}
  </div>
</template>
<script>
export default {
  inject: ['sharedData'],
};
</script>

在 main.js 中定義一個(gè)空的 Vue 實(shí)例作為事件總線：

import Vue from 'vue';
export const bus = new Vue();

子組件 A 中的代碼：

<template>
  <div>
    <button @click="sendDataToSibling">Send Data To Sibling</button>
  </div>
</template>
<script>
import { bus } from './main';
export default {
  methods: {
    sendDataToSibling() {
      bus.$emit('send-data', 'data from child a');
    },
  },
};
</script>

子組件 B 中的代碼：

<template>
  <div>
    {{ dataFromSibling }}
  </div>
</template>
<script>
import { bus } from './main';
export default {
  data() {
    return {
      dataFromSibling: '',
    };
  },
  mounted() {
    bus.$on('send-data', (data) => {
      this.dataFromSibling = data;
    });
  },
};
</script>

在 store.js 中定義一個(gè) Vuex store：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    dataC: 'data from Vuex',
  },
  mutations: {
    updateDataC(state, payload) {
      state.dataC = payload;
    },
  },
});
export default store;

子組件 A 中的代碼：

<template>
  <div>
    <button @click="sendDataToSibling">Send Data To Sibling</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations(['updateDataC']),
    sendDataToSibling() {
      this.updateDataC('data from child a');
    },
  },
};
</script>

子組件 B 中的代碼：

<template>
  <div>
    {{ dataC }}
  </div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['dataC']),
  },
};
</script>

7、父子組件傳值，使用 $attrs 和 $listeners：

$attrs 是一個(gè)包含了父組件傳遞給子組件的所有屬性的對(duì)象，可以在子組件中通過(guò)訪問(wèn) $attrs 來(lái)獲取這些屬性。如果不希望某些屬性傳遞到子組件中，可以在子組件中使用 v-bind="$attrs" 并指定排除的屬性名稱，或者在父組件中使用 .sync 修飾符，將屬性綁定到子組件的一個(gè)名為 $attrs 的屬性上。

$listeners 是一個(gè)包含了父組件傳遞給子組件的所有事件監(jiān)聽器的對(duì)象，可以在子組件中通過(guò)訪問(wèn) $listeners 來(lái)獲取這些事件監(jiān)聽器。如果需要在子組件中監(jiān)聽某個(gè)事件，可以使用 v-on="$listeners" 將所有的事件監(jiān)聽器綁定到子組件上。

$attrs 和 $listeners 是常用的兩個(gè)特殊屬性，它們可以用來(lái)向組件傳遞屬性和事件監(jiān)聽器。假設(shè)我們有一個(gè)父組件和一個(gè)子組件，子組件需要接收父組件的一些屬性和事件監(jiān)聽器，同時(shí)還需要把這些屬性和事件傳遞給子組件的某個(gè)子元素。

父組件中的代碼：

<template>
  <div>
    <child-component :title="title" v-on:click="handleClick" />
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  data() {
    return {
      title: 'Hello World',
    };
  },
  methods: {
    handleClick() {
      console.log('Button Clicked');
    },
  },
};
</script>

子組件中的代碼：

<template>
  <div>
    <button @click="$emit('click')">Click me</button>
    <div v-bind="$attrs">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  mounted() {
    console.log(this.$attrs);
    console.log(this.$listeners);
  },
};
</script>

在子組件中，我們使用 v-bind="$attrs" 把所有父組件傳遞過(guò)來(lái)的屬性綁定到子元素上。同時(shí)，我們使用 $emit('click') 來(lái)觸發(fā)父組件傳遞過(guò)來(lái)的點(diǎn)擊事件。

在子組件中，需要設(shè)置 inheritAttrs: false，來(lái)禁止自動(dòng)將父組件傳遞的屬性綁定到子組件的根元素上。這樣，我們就可以使用 v-bind="$attrs" 把所有屬性綁定到子元素上。

在 mounted 鉤子中，我們可以通過(guò) this.$attrs 和 this.$listeners 來(lái)分別訪問(wèn)所有屬性和事件監(jiān)聽器。這樣，我們就可以在子組件中使用這些屬性和事件了。

三、Vue 3 組件之間傳值示例代碼

1、Props

Props 是一種在組件之間傳遞數(shù)據(jù)的方式，通過(guò)在組件標(biāo)簽上使用屬性綁定，父組件可以向子組件傳遞數(shù)據(jù)。在子組件中，通過(guò)在 props 中定義對(duì)應(yīng)的屬性名，可以獲取到父組件傳遞過(guò)來(lái)的數(shù)據(jù)。

例如，父組件中的模板：

<template>
  <child-component :message="hello"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      hello: 'Hello from parent!'
    };
  }
};
</script>

子組件中的模板：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
};
</script>

2、$emit

$emit 是一種在子組件中觸發(fā)事件的方式，通過(guò)在子組件中使用 $emit 方法，可以向父組件發(fā)送數(shù)據(jù)。在父組件中，通過(guò)在子組件標(biāo)簽上使用 v-on 或 @ 語(yǔ)法，可以監(jiān)聽子組件觸發(fā)的事件，并獲取子組件發(fā)送的數(shù)據(jù)。

例如，子組件中的模板：

<template>
  <button @click="sendMessage">Send Message</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child!');
    }
  }
};
</script>

父組件中的模板：

<template>
  <child-component @message-sent="receiveMessage"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log(message);
    }
  }
};
</script>

3、Provide/Inject

Provide/Inject 是一種在祖先組件和后代組件之間共享數(shù)據(jù)的方式。通過(guò)在祖先組件中使用 provide 方法提供數(shù)據(jù)，在后代組件中使用 inject 方法獲取數(shù)據(jù)。

例如，祖先組件中的模板：

<template>
  <child-component></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor!'
    };
  }
};
</script>

后代組件中的模板：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  inject: ['message']
};
</script>

4、$attrs 和 $listeners

$attrs 和 $listeners 是在 Vue 2 中引入的特性，但在 Vue 3 中也得到了支持。

例如，父組件中的模板：

<template>
  <child-component message="Hello from parent!" @click="handleClick"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleClick() {
      console.log('Clicked!');
    }
  }
};
</script>

子組件中的模板：

<template>
  <div v-bind="$attrs" v-on="$listeners">{{ message }}</div>
</template>
<script>
export default {
  props: {
    message: String
  }
};
</script>

5、provide/inject 與 props 的結(jié)合使用

在 Vue 3 中，provide 和 inject 可以與 props 結(jié)合使用，從而實(shí)現(xiàn)一種高級(jí)的數(shù)據(jù)傳遞方式。具體做法是，在祖先組件中使用 provide 方法提供數(shù)據(jù)，并在后代組件中使用 inject 方法獲取數(shù)據(jù)；同時(shí)，在后代組件中，可以在 props 中聲明和接收數(shù)據(jù)，從而實(shí)現(xiàn)數(shù)據(jù)的類型檢查和默認(rèn)值設(shè)定。

例如，祖先組件中的模板：

<template>
  <child-component></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor!'
    };
  }
};
</script>

后代組件中的模板：

<template>
  <div>{{ message }}</div>
</template>
<script>
export default {
  inject: ['message'],
  props: {
    message: {
      type: String,
      default: 'Hello from default!'
    }
  }
};
</script>

在上面的例子中，子組件會(huì)首先從祖先組件中獲取名為 message 的數(shù)據(jù)，如果沒有提供，則使用默認(rèn)值 Hello from default!。在子組件中，props 會(huì)覆蓋 provide/inject，因此如果父組件和子組件都提供了同一個(gè)屬性，子組件中的 props 值會(huì)覆蓋 provide/inject 中的值。

6、Vuex

Vuex 是一種專門用于管理應(yīng)用程序狀態(tài)的庫(kù)，可以用于跨組件傳遞數(shù)據(jù)。在 Vuex 中，可以定義一個(gè)全局的狀態(tài)管理器，所有的組件都可以通過(guò) getter 和 setter 方法訪問(wèn)和修改這個(gè)狀態(tài)管理器中的數(shù)據(jù)。

例如，定義一個(gè) Vuex store：

import { createStore } from 'vuex';
const store = createStore({
  state: {
    message: 'Hello from store!'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message;
    }
  },
  getters: {
    getMessage(state) {
      return state.message;
    }
  }
});
export default store;

在組件中使用 Vuex：

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">Update message</button>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex';
export default {
  computed: {
    ...mapGetters(['getMessage'])
  },
  methods: {
    ...mapMutations(['updateMessage'])
  }
};
</script>

在這個(gè)例子中，組件通過(guò) mapGetters 方法將 Vuex store 中的 getMessage 方法映射為組件中的計(jì)算屬性，從而獲取 Vuex store 中的數(shù)據(jù)；同時(shí)，通過(guò) mapMutations 方法將 Vuex store 中的 updateMessage 方法映射為組件中的方法，從而修改 Vuex store 中的數(shù)據(jù)。

7、EventBus

EventBus 是一種自定義事件總線，可以用于在任意組件之間傳遞數(shù)據(jù)。在 EventBus 中，可以定義一個(gè)全局的事件中心，所有的組件都可以通過(guò) $on 和 $emit 方法監(jiān)聽和觸發(fā)自定義事件。

例如，定義一個(gè) EventBus：

import mitt from 'mitt';
const bus = mitt();
export default bus;

在組件中使用 EventBus：

<template>
  <div>{{ message }}</div>
  <button @click="updateMessage">Update message</button>
</template>
<script>
import bus from './event-bus';
export default {
  data() {
    return {
      message: 'Hello from component!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'New message!';
      bus.emit('message-updated', this.message);
    }
  },
  created() {
    bus.on('message-updated', message => {
      console.log(message);
    });
  }
};
</script>

在這個(gè)例子中，組件中的 updateMessage 方法通過(guò) EventBus 的 emit 方法觸發(fā)了一個(gè)名為 message-updated 的自定義事件，并將修改后的消息作為參數(shù)傳遞給事件處理函數(shù)；同時(shí)，在組件的 created 生命周期鉤子中，通過(guò) EventBus 的 on 方法監(jiān)聽名為 message-updated 的自定義事件，并在事件處理函數(shù)中打印接收到的消息。

總之，Vue 3 中組件之間傳值的方式很多，可以根據(jù)具體的場(chǎng)景選擇最適合的方式。使用 props 和 $emit 可以實(shí)現(xiàn)父子組件之間的傳值，使用 provide 和 inject 可以實(shí)現(xiàn)祖先組件向后代組件的傳值，使用 Vuex 和 EventBus 可以實(shí)現(xiàn)任意組件之間的傳值。在選擇組件傳值方式時(shí)，還應(yīng)該考慮數(shù)據(jù)的安全性、可維護(hù)性和性能等因素。

四、Vue 2 和 Vue 3 組件之間傳值的區(qū)別

Vue 2 和 Vue 3 之間在組件之間傳遞值的方法有一些不同之處。下面是一些主要的區(qū)別：

Props

在 Vue 2 中，父組件通過(guò) props 把數(shù)據(jù)傳遞給子組件。子組件可以在 props 選項(xiàng)中聲明它們需要的 props，然后在組件的模板中使用它們。

在 Vue 3 中，props 的使用與 Vue 2 類似，但有一些重要的變化。首先，props 的聲明方式已經(jīng)發(fā)生了變化，現(xiàn)在使用 ES6 的解構(gòu)語(yǔ)法來(lái)聲明。其次，Vue 3 強(qiáng)制 props 的類型檢查，并提供了更多的選項(xiàng)來(lái)控制 props 的行為，例如默認(rèn)值和必需性等。

Emit

在 Vue 2 中，子組件通過(guò) emit 向父組件發(fā)送消息。子組件可以使用 this.$emit 方法觸發(fā)一個(gè)自定義事件，并可以傳遞任意數(shù)據(jù)作為事件的參數(shù)。父組件可以監(jiān)聽子組件觸發(fā)的事件，并在事件處理程序中處理傳遞的數(shù)據(jù)。

在 Vue 3 中，emit 的使用與 Vue 2 相似，但也有一些重要的變化。首先，Vue 3 引入了新的 setup() API，該 API 取代了 Vue 2 中的 created 和 mounted 等生命周期鉤子函數(shù)。其次，emit 的使用方式已經(jīng)改變，現(xiàn)在使用 v-model 代替 this.$emit。v-model 是一個(gè)語(yǔ)法糖，允許在父子組件之間雙向綁定數(shù)據(jù)。

Provide/Inject

在 Vue 2 中，父組件可以通過(guò) provide 方法向子組件傳遞數(shù)據(jù)，子組件可以使用 inject 方法獲取數(shù)據(jù)。provide 和 inject 允許在組件樹中的任何地方傳遞數(shù)據(jù)，而不需要通過(guò) props 一級(jí)一級(jí)地傳遞。

在 Vue 3 中，provide 和 inject 的使用方式與 Vue 2 相同。但是，Vue 3 提供了新的 reactive 和 readonly 方法，允許在 provide 中提供響應(yīng)式的數(shù)據(jù)。這意味著，如果在 provide 中提供的數(shù)據(jù)發(fā)生變化，子組件中使用這些數(shù)據(jù)的地方也會(huì)相應(yīng)地更新。

Vue 3 對(duì)于組件之間傳遞值的基本思想與 Vue 2 相似，但是有一些語(yǔ)法和 API 上的改變。這些變化旨在提供更好的類型檢查、更好的性能和更好的開發(fā)體驗(yàn)。

到此這篇關(guān)于Vue 組件之間傳值的主要方法的文章就介紹到這了,更多相關(guān)Vue 組件之間傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: