VUE 父子組件、兄弟組件之間通信最強詳解

這篇具有很好參考價值的文章主要介紹了VUE 父子組件、兄弟組件之間通信最強詳解。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

1. 父組件調(diào)用子組件內(nèi)參數(shù)/方法

1.1 通過 ref 調(diào)用/獲取子組件內(nèi)參數(shù)/方法

2. 子組件調(diào)用父組件內(nèi)參數(shù)/方法

2.1 通過?emit 調(diào)用父組件方法

2.2 通過?props?調(diào)用父組件方法/參數(shù)

2.3 通過 this.$parent 調(diào)用父組件方法/參數(shù)

3. 兄弟組件通信

3.1 通過?bus 進行兄弟組件通信

3.2 通過?父組件讓兄弟組件進行通信

簡單總結(jié)：

1.1 通過 ref 調(diào)用/獲取子組件內(nèi)參數(shù)/方法

實現(xiàn)：就是在你想要訪問的組件上通過 ref 注冊引用信息，然后依靠 this.$refs 調(diào)用組件內(nèi)的方法以及參數(shù)。

2.1 通過?emit 調(diào)用父組件方法

實現(xiàn)：將要在子組件中?想調(diào)用的父組件方法，通過【@】配置至組件上，然后通過this.$emit()來調(diào)用。

2.2 通過 props 調(diào)用父組件方法/參數(shù)

實現(xiàn)：將要在子組件中?想調(diào)用的父組件方法/父組件參數(shù)，通過【:】配置至組件上，接著在子組件的?props 內(nèi)進行接收，然后直接通過 this.來調(diào)用就行。

2.3 通過 this.$parent 調(diào)用父組件方法/參數(shù)

實現(xiàn)：呃，啥也不用弄，只要保持當前組件上面有個父組件就行，直接通過 this.$parent 調(diào)用就行。

3.1 通過 bus 進行兄弟組件通信

實現(xiàn)：通過 new Vue() 生成一個 bus 總線，然后在想要接收通信的組件內(nèi)設(shè)置?bus.$on，在想要發(fā)起通信的組件內(nèi)使用 bus.$emit。

3.2 通過父組件讓兄弟組件進行通信

子組件1 傳值給父組件，父組件傳值給子組件2

想了解 ref、$refs、$parent? 請看我的另一篇文章：http://t.csdn.cn/66Fkt

1. 父組件調(diào)用子組件內(nèi)參數(shù)/方法

1.1 通過 ref 調(diào)用/獲取子組件內(nèi)參數(shù)/方法

步驟：

a 父組件 => 在子組件元素上設(shè)置 ref='名稱'

b 父組件 => 然后通過使用 this.$refs.名稱.參數(shù)/方法調(diào)用方法/參數(shù)

想了解 ref 請看我的另一篇文章：http://t.csdn.cn/66Fkt

先看截圖，再看代碼

VUE 父子組件、兄弟組件之間通信最強詳解

<template>
  <div class="box">

      <div>我是父組件</div>

      <div>{{ value }}</div>
      <button @click="handleFetchBaby1Param" class="button">獲取 baby1 內(nèi)參數(shù)</button>
      <button @click="handleFetchBaby1Function" class="button">調(diào)用 baby1 內(nèi)方法</button>
      
      <!-- 通過 ref 在 baby1 組件身上 注冊引用信息 -->
      <baby1 ref="baby1" class="border"></baby1>
      
  </div>
</template>

<script>
import baby1 from '@/components/html/baby1.vue'
export default {
  name: 'home',
  components:{
    baby1
  },
  data(){
    return{
      value: ""
    }
  },
  methods:{
    // 獲取 baby1 內(nèi)參數(shù)
    handleFetchBaby1Param(){
      this.value = this.$refs.baby1.value;
    },
    // 調(diào)用 baby1 內(nèi)方法
    handleFetchBaby1Function(){
      this.$refs.baby1.handleBaby1Self()
    }
  }
}
</script>

<template>
  <div class="box">
        <div>我是子組件1</div>
        <input v-model="value" style="width: 100%">
  </div>
</template>

<script>

export default {
    name: 'baby1',
    data(){
        return{
            value: null
        }
    },
    methods: {
        // Baby1 組件
        handleBaby1Self(){
            this.value = this.value + 1;
            console.log('Baby1 組件 內(nèi)方法被調(diào)用 =>', this.value)
        }
    }
}
</script>

2. 子組件調(diào)用父組件內(nèi)參數(shù)/方法

2.1 通過?emit 調(diào)用父組件方法

步驟：

a 父組件 => 首先在父組件內(nèi)準備好被子組件調(diào)用的方法

b 父組件 => 將準備好的方法需要通過@ 掛載至組件元素上?（舉例：<baby1 @childConsole='parentConsole'></baby1>?）

c?子組件 => 在子組件內(nèi) 通過?this.$emit('方法名', 參數(shù)1,參數(shù)2...) 調(diào)用

先看截圖，再看代碼

VUE 父子組件、兄弟組件之間通信最強詳解

<template>
  <div class="box">
      <div>我是父組件</div>
      <div>{{ name }}</div>
      <!-- 通過 @ 將事件掛載 在組件上 -->
      <baby1 @childConsole='parentConsole'></baby1> 
  </div>
</template>

<script>
import baby1 from '@/components/html/baby1.vue'
export default {
  name: 'home',
  components:{
    baby1
  },
  data(){
    return{
      name: '',
    }
  },
  methods:{
    parentConsole(name){
      this.name = name;
      console.log('父組件 的 方法被調(diào)用', this.name)
    }
  }
}
</script>

<template>
  <div class="box">
        <div>我是子組件</div>
        <input v-model="value" style="width: 100%">
        <button @click="handleFetchHomeFunction">調(diào)用 父組件 方法</button>
  </div>
</template>

<script>
export default {
    name: 'baby1',
    data(){
        return{
            value: ''
        }
    },
    methods: {
        // 調(diào)用 父組件方法
        handleFetchHomeFunction(){
            this.$emit('childConsole', this.value)
        }
    }
}
</script>

2.2 通過?props?調(diào)用父組件方法/參數(shù)

步驟：

a 父組件 => 首先在父組件內(nèi)準備好被子組件調(diào)用的方法/參數(shù)

b 父組件 => 將準備好的方法需要通過: 將方法/參數(shù) 掛載至組件元素上（舉例：<baby1 :childConsole='parentConsole' :mail='mail'></baby1>?）

c 子組件 => 在子組件 props 中配置接收來自父組件的方法/參數(shù)

d?子組件 => 在子組件內(nèi) 通過?this.方法名(參數(shù)1,參數(shù)2...) 調(diào)用 / this.參數(shù)名獲取

先看截圖，再看代碼

VUE 父子組件、兄弟組件之間通信最強詳解

<template>
  <div class="box">
      <div>我是父組件</div>
      <div>{{ name }}</div>
      <!-- 通過 : 將 方法/參數(shù) 掛載 在組件上 -->
      <baby1 :childConsole='parentConsole' :mail='mail'></baby1> 
  </div>
</template>

<script>
import baby1 from '@/components/html/baby1.vue'
export default {
  name: 'home',
  components:{
    baby1
  },
  data(){
    return{
      name: '',
      mail: 'xxxx@qq.com'
    }
  },
  methods:{
    parentConsole(name){
      this.name = name;
      console.log('父組件 的 方法被調(diào)用', this.name)
    }
  }
}
</script>

<template>
  <div class="box">
        <div>我是子組件</div>
        {{ mail }}
        <input v-model="value" style="width: 100%">
        <button @click="handleFetchHomeFunction">調(diào)用 父組件 方法</button>
  </div>
</template>

<script>
export default {
    name: 'baby1',
    // 通過 配置 props 接收來自的方法/參數(shù)
    props:{
        // 接受 方法
        childConsole:{
            type: Function,
            require: true,
            default: null
        },
        // 接受 參數(shù)
        mail:{
            type: String,
            require: true,
            default: null
        },
    },
    data(){
        return{
            value: ''
        }
    },
    methods: {
        // 調(diào)用 父組件方法
        handleFetchHomeFunction(){
            this.childConsole(this.value)
            console.log('mail =>', this.mail)
        }
    }
}
</script>

2.3 通過 this.$parent 調(diào)用父組件方法/參數(shù)

步驟：

a 父組件 => 首先在父組件內(nèi)準備好被子組件調(diào)用的方法/參數(shù)

b 子組件 => 在子組件內(nèi) 通過?this.$parent.父組件方法名(參數(shù)1,參數(shù)2...) 調(diào)用方法 /?this.$parent.父組件內(nèi)參數(shù)名獲取參數(shù)

想了解?$parent 請看我的另一篇文章：http://t.csdn.cn/66Fkt

先看截圖，再看代碼

VUE 父子組件、兄弟組件之間通信最強詳解

<template>
  <div class="box">
      <div>我是父組件</div>
      <div>{{ name }}</div>
      <baby1></baby1> 
  </div>
</template>

<script>
import baby1 from '@/components/html/baby1.vue'
export default {
  name: 'home',
  components:{
    baby1
  },
  data(){
    return{
      name: '',
      age: 18,
    }
  },
  methods:{
    parentConsole(name){
      this.name = name;
      console.log('父組件 的 方法被調(diào)用', this.name)
    }
  }
}
</script>

<template>
  <div class="box">
        <div>我是子組件</div>
        {{ age }}
        <input v-model="value" style="width: 100%">
        <button @click="handleFetchHomeFunction">調(diào)用 父組件 方法</button>
  </div>
</template>

<script>
export default {
    name: 'baby1',
    data(){
        return{
            value: '',
            age: null,
        }
    },
    methods: {
        handleFetchHomeFunction(){
            // 調(diào)用 父組件方法
            this.$parent.parentConsole(this.value);
            // 獲取 父組件參數(shù)
            this.age = this.$parent.age;
        }
    }
}
</script>

3. 兄弟組件通信

3.1 通過?bus 進行兄弟組件通信

步驟：

a 在?main.js 文件內(nèi) 將 new Vue() 掛載至 vue 原型上。這樣方便使用，不用到處導(dǎo)入

b 在接受通信的組件內(nèi) 使用?this.$bus.$on() 進行初始化

c 在發(fā)起通信組件內(nèi) 使用?this.$bus.$emit('方法名', 參數(shù)1, 參數(shù)2...)

先看截圖，再看代碼

VUE 父子組件、兄弟組件之間通信最強詳解

// mian.js

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.prototype.$bus = new Vue(); // 設(shè)置 掛載至 vue 的原型上

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

<template>
  <div class="box">
      <div>我是父組件</div>

      <div style="display: flex">
        <!-- 子組件 1 （-_- 我和 子組件2 是同級關(guān)系 所以是兄弟組件 -_- ）-->
        <baby1 class="border"></baby1>
        <!-- 子組件 2 （-_- 我和 子組件1 是同級關(guān)系 所以是兄弟組件 -_- ）-->
        <baby2 class="border"></baby2> 
      </div>
      
  </div>
</template>

<script>
import baby1 from '@/components/html/baby1.vue'
import baby2 from '@/components/html/baby2.vue'

export default {
  name: 'home',
  components:{
    baby1,
    baby2
  }
}
</script>

<template>
  <div class="box">
        <div>我是子組件1</div>
        <input v-model="value" style="width: 100%">
        <button @click="handleFetchHomeFunction">將值 更新至 子組件2</button>
  </div>
</template>

<script>

export default {
    name: 'baby1',
    data(){
        return{
            value: ''
        }
    },
    methods: {
        // 調(diào)用 兄弟組件 方法
        handleFetchHomeFunction(){
            this.$bus.$emit('valueUpdate', this.value)
        }
    }
}
</script>

<template>
  <div class="box">
        <div>我是子組件2</div>
        <input v-model="value" style="width: 100%">
  </div>
</template>

<script>


export default {
    name: 'baby1',
    data(){
        return{
            value: ''
        }
    },
    mounted(){
        // 接收 事件
        this.$bus.$on('valueUpdate', (value)=>{
            this.value = value;
        })
    },
}
</script>

3.2 通過?父組件讓兄弟組件進行通信

因為相比較 bus 不是很方便，兄弟通信盡量用 bus 就好，所以這里就不放代碼了，直接說一下思路

子組件1 傳值給父組件，父組件傳值給子組件2

博主清楚文章排版的好壞，會導(dǎo)致閱讀者能否更好的理解內(nèi)容！

所以如果你有好的排版想法，可以私信給我呦！文章來源地址http://www.zghlxwxcb.cn/news/detail-451422.html

到了這里，關(guān)于VUE 父子組件、兄弟組件之間通信最強詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

国产无码综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Toy模板網(wǎng)

VUE 父子組件、兄弟組件之間通信最強詳解

1. 父組件調(diào)用子組件內(nèi)參數(shù)/方法

1.1 通過 ref 調(diào)用/獲取子組件內(nèi)參數(shù)/方法

2. 子組件調(diào)用父組件內(nèi)參數(shù)/方法

2.1 通過?emit 調(diào)用父組件方法

2.2 通過?props?調(diào)用父組件方法/參數(shù)

2.3 通過 this.$parent 調(diào)用父組件方法/參數(shù)

3. 兄弟組件通信

3.1 通過?bus 進行兄弟組件通信

3.2 通過?父組件讓兄弟組件進行通信

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

VUE 父子組件、兄弟組件 之間通信 最強詳解

1. 父組件 調(diào)用 子組件 內(nèi)參數(shù)/方法

1.1 通過 ref 調(diào)用/獲取 子組件內(nèi)參數(shù)/方法

2. 子組件 調(diào)用 父組件 內(nèi)參數(shù)/方法

2.1 通過?emit 調(diào)用 父組件方法

2.2 通過?props?調(diào)用 父組件方法/參數(shù)

2.3 通過 this.$parent 調(diào)用 父組件方法/參數(shù)

3. 兄弟組件 通信

3.1 通過?bus 進行 兄弟組件 通信

3.2 通過?父組件 讓兄弟組件 進行通信

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

VUE 父子組件、兄弟組件之間通信最強詳解

1. 父組件調(diào)用子組件內(nèi)參數(shù)/方法

1.1 通過 ref 調(diào)用/獲取子組件內(nèi)參數(shù)/方法

2. 子組件調(diào)用父組件內(nèi)參數(shù)/方法

2.1 通過?emit 調(diào)用父組件方法

2.2 通過?props?調(diào)用父組件方法/參數(shù)

2.3 通過 this.$parent 調(diào)用父組件方法/參數(shù)

3. 兄弟組件通信

3.1 通過?bus 進行兄弟組件通信

3.2 通過?父組件讓兄弟組件進行通信