前言

vue中的組件傳值大家應該都不陌生，今天用幾個簡單易懂的小案例教大家在項目中如何使用父子傳值、子父傳值以及兄弟傳值實現組件之間的交互。

---

實現思路

父子傳值： 在父組件中給子組件標簽上綁定一個屬性， 屬性上掛載需要傳遞的值，在子組件通過 props:['自定義屬性名'] 來接收數據。

子父傳值： 在子組件中自定義一個事件，調用這個事件后，子組件通過 this.$emit('自定義事件名',要傳遞的數據) 發送父組件可以監聽的數據，最后父組件監聽子組件事件，調用事件并接收傳遞過來的數據。

兄弟傳值： 在第一個組件中使用 $bus 傳遞自定義方法或者參數，然后在另一個同級組件中通過 $on 接收傳過來的方法和參數。

---

話不多說，下面進入實戰

---

父子傳值

本篇小實例主要是模擬父組件向子組件傳遞數據的情況。

• 父組件 index.vue

<template><!-- 父組件 --><div><Child :message="informtion"></Child></div> </template><script> // 引入子組件 import Child from "./subassembly/seed.vue"; export default {data() {return {informtion: "傳遞給子組件的數據", //要傳遞給子組件的數據};},//一定要注冊組件components: {Child,}, }; </script>

• 子組件 seed.vue

<template><!-- 子組件 --><h2>我是子組件<br />接收父組件值：{{ value }}</h2> </template><script> export default {data() {return {value: "",//接收的值};},props: {// message用于接收message: {type: String, //驗證類型，也可以驗證其他類型default: "", //如果父組件傳值，則用父組件的值渲染，反之使用默認值},},watch: {message: {handler(newName, oldName) {this.value = newName;},deep: true, //深度監聽immediate: true, //首次綁定的時候，是否執行 handler},}, }; </script>

實現效果

---

子父傳值

本篇小實例主要是模擬子組件向父組件傳遞數據的情況。

• seed.vue 子組件

<template><!-- 子組件 --><button @click="seedOnclick">我是子組件的按鈕</button> </template><script> export default {data() {return {seedCode: "Romantic never die!", //子傳父要傳遞的值};},methods: {// 子組件事件方法seedOnclick() {this.$emit("seed", this.seedCode); //參數1：自定義事件 參數2：要傳遞的值},}, }; </script>

• index.vue 父組件

<template><!-- 父組件 --><div><Child @seed="seedAccept"></Child></div> </template><script> // 引入子組件 import Child from "./subassembly/seed.vue"; export default {//一定要注冊組件components: {Child,},methods: {seedAccept(data) {console.log(data, "子組件傳給父組件的值");},}, }; </script>

實現效果

---

子組件如何調用父組件的方法？

1. $parent方法

$parent 方法是直接在子組件中通過 this.$parent.event 調用父組件的方法，如下：

• 父組件

<template><div><!-- 子組件標簽 --><child></child></div> </template> <script> import child from "./dialog/dialog"; //引入子組件 export default {components: {// 注冊組件child,},methods: {//父組件方法parentMethod() {console.log("子組件點擊后觸發此方法");},}, }; </script>

• 子組件

<template><div><button @click="childOnclick()">子組件點擊事件</button></div> </template> <script> export default {methods: {// 子組件點擊事件childOnclick() {// 通過$parent方法調用父組件方法this.$parent.parentMethod();},}, }; </script>

2. $emit方法

$emit 方法是在子組件里用 $emit 向父組件觸發一個事件，父組件監聽這個事件即可，如下：

• 父組件

<template><div><!-- 子組件標簽 --><child @fatherMethod="parentMethod"></child></div> </template> <script> import child from "./dialog/dialog"; //引入子組件 export default {components: {// 注冊組件child,},methods: {//父組件方法parentMethod() {console.log("子組件點擊后觸發此方法");},}, }; </script>

• 子組件

<template><div><button @click="childOnclick()">子組件點擊事件</button></div> </template> <script> export default {methods: {// 子組件點擊事件childOnclick() {// 通過$emit方法調用父組件方法this.$emit("fatherMethod");},}, }; </script>

3. 將方法傳入子組件中

簡單來說就是在父組件把方法傳入子組件內，然后再在子組件中調用這個方法，如下：

• 父組件

<template><div><!-- fatherMethod 傳遞的方法--><child :fatherMethod="parentMethod"></child></div> </template> <script> import child from "./dialog/dialog"; //引入子組件 export default {components: {// 注冊組件child,},methods: {//父組件方法parentMethod() {console.log("子組件點擊后觸發此方法");},}, }; </script>

• 子組件

<template><div><button @click="childOnclick()">子組件點擊事件</button></div> </template> <script> export default {props: {fatherMethod: {type: Function, //驗證類型，也可以驗證其他類型default: null, //如果父組件傳值，則用父組件的值渲染，反之使用默認值},},methods: {// 子組件點擊事件childOnclick() {if (this.fatherMethod) {this.fatherMethod();}},}, }; </script>

---

兄弟傳值

本篇小實例主要是模擬同級組件間傳遞數據及調用方法的情況。

1. 全局注冊

1.1 安裝

npm install --save vue-bus cnpm install --save vue-bus

1.2 引入并注冊

// main.js import VueBus from 'vue-bus' Vue.use(VueBus)

1.3 使用

• seed.vue 子組件1

<template><div><h3>子組件1</h3><el-button type="primary" size="mini" @click="firstly">點擊傳值</el-button></div> </template><script> export default {data() {return {message: "子組件1定義的變量",};},methods: {firstly() {// 傳了一個自定義方法 getTargetPointBUS 和參數 this.messagethis.$bus.$emit("getTargetPointBUS", this.message);},}, }; </script>

• sons.vue 子組件2

<template><div><h3>子組件2<br />接收子組件1的值：{{ message }}</h3></div> </template><script> export default {data() {return {message: "",};},mounted() {// 觸發自定義方法 getTargetPointBUS，同時觸發自身的方法 getTargetPointthis.$bus.on("getTargetPointBUS", (data) => {console.log(data, "子組件1傳的值");this.message = data;this.getTargetPoint(data);});},//組件銷毀接觸事件綁定destroyed: function () {this.$bus.off("getTargetPointBUS");},methods: {// 觸發方法getTargetPoint(data) {console.log("觸發子組件2方法");},}, }; </script>

• index.vue 父組件

<template><!-- 父組件 --><div><Child></Child><Electronic></Electronic></div> </template><script> // 引入子組件 import Child from "./subassembly/seed.vue"; import Electronic from "./subassembly/sons.vue"; export default {//一定要注冊組件components: {Child,Electronic,}, }; </script>

2. 局部注冊

2.1 新建一個 eventBus.js 文件

import Vue from 'vue' const eventBus = new Vue() export default eventBus

2.2 在使用的組件中引入

import eventBus from "../eventBus";

2.3 使用

• seed.vue 子組件1

<template><div><h3>子組件1</h3><el-button type="primary" size="mini" @click="firstly">點擊傳值</el-button></div> </template><script> import eventBus from "../eventBus"; export default {data() {return {message: "子組件1定義的變量",};},methods: {firstly() {// 傳了一個自定義方法 getTargetPointBUS 和參數 this.messageeventBus.$emit("getTargetPointBUS", this.message);},}, }; </script>

• sons.vue 子組件2

<template><div><h3>子組件2<br />接收子組件1的值：{{ message }}</h3></div> </template><script> import eventBus from "../eventBus"; export default {data() {return {message: "",};},mounted() {// 觸發自定義方法 getTargetPointBUS，同時觸發自身的方法 getTargetPointeventBus.$on("getTargetPointBUS", (data) => {console.log(data, "子組件1傳的值");this.message = data;this.getTargetPoint(data);});},//組件銷毀接觸事件綁定destroyed: function () {eventBus.$off("getTargetPointBUS");},methods: {// 觸發方法getTargetPoint(data) {console.log("觸發子組件2方法");},}, }; </script>

• index.vue 父組件

<template><!-- 父組件 --><div><Child></Child><Electronic></Electronic></div> </template><script> // 引入子組件 import Child from "./subassembly/seed.vue"; import Electronic from "./subassembly/sons.vue"; export default {//一定要注冊組件components: {Child,Electronic,}, }; </script>

實現效果

總結

以上是生活随笔為你收集整理的vue组件传值的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。