欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue組件通信深入分析

 更新時間:2022年08月05日 10:57:42   作者:飯啊飯°  
對于vue來說,組件之間的消息傳遞是非常重要的,用vue可以是要組件復(fù)用的,而組件實(shí)例的作用域是相互獨(dú)立,這意味著不同組件之間的數(shù)據(jù)無法互相引用,一般來說,組件之間可以有幾種關(guān)系,下面是我對組件之間消息傳遞的常用方式的總結(jié)

一、組件間的通信方式分類

  • 父子組件之間的通信;
  • 兄弟組件之間的通信;
  • 祖孫與后代組件之間的通信;
  • 非關(guān)系組件之間的通信。

二、props傳遞數(shù)據(jù)

適用場景:父組件傳遞數(shù)據(jù)給子組件;

  • 子組件設(shè)置props屬性,定義接收父組件傳遞過來的參數(shù);
  • 父組件在使用子組件標(biāo)簽中通過字面量來傳遞值

Person.vue

<template>
  <div>
    Person
    <Student1 name="jack" age="18"></Student1>
    </div>
</template>
<script>
import Student1 from './Student1'
export default {
    name: 'Person',
    components: {
        Student1,
    },
</script>

Student1.vue

<template>
  <div>
    Student1
    {{name}},{{age}}
  </div>
</template>
<script>
export default {
    name: 'Student1',
    props: {
        name: String,
        age:Number,
    }
}
</script>

效果

三、$emit 觸發(fā)自定義事件

  • 適用場景:子組件傳遞數(shù)據(jù)給父組件
  • 子組件通過 $emit觸發(fā)自定義事件,$emit第二個參數(shù)為傳遞的數(shù)值;
  • 父組件綁定監(jiān)聽器獲取到子組件傳遞過來的參數(shù)。

Student1.vue

<template>
  <div>
    Student1
    <button @click="giveData()">點(diǎn)我傳遞數(shù)據(jù)</button>
  </div>
</template>
<script>
export default {
    name: 'Student1',
    methods: {
        giveData() { 
            this.$emit('add', '12345');
        }
    },
}
</script>

Person.vue

<template>
  <div>
    Person
    <Student1 @add="cartAdd($event)"></Student1>
    </div>
</template>
<script>
import Student1 from './Student1'
export default {
    name: 'Person',
    components: {
        Student1,
    },
    methods: {
        cartAdd(event) { 
            console.log(event);
        }
    },
}
</script>

四、ref標(biāo)記

  • 使用場景:子組件傳遞數(shù)據(jù)給父組件
  • 父組件在使用子組件的時候設(shè)置ref
  • 父組件通過設(shè)置子組件ref來獲取數(shù)據(jù)
<template>
  <div>
    Person
    <Student2 ref="foo"></Student2>
    <button @click="getRef()">點(diǎn)擊獲取ref數(shù)據(jù)</button>
  </div>
</template>
<script>
import Student2 from "./Student2";
export default {
  name: "Person",
  components: {
    Student2,
  },
  methods: {
    getRef() {
      console.log(this.$refs.foo);
    },
  },
};
</script>

效果

五、EventBus事件總線

  • 使用場景:任意組件傳值
  • 創(chuàng)建一個中央事件總線EventBus
  • 兄弟組件通過$emit觸發(fā)自定義事件,$emit第二個參數(shù)為傳遞的數(shù)值
  • 另一個兄弟組件通過$on監(jiān)聽自定義事件

main.js

beforeCreate() {
  Vue.prototype.$bus = this
}

Student2.vue

<template>
  <div>
    Student2
    <button @click="getBus()">點(diǎn)我獲取全局事件總線數(shù)據(jù)</button>
  </div>
</template>
<script>
export default {
  name: 'Student2',
  data() {
    return {
      name: 'fanafan',
      age:'17'
    }
  },
  methods:{
    getBus(){
      this.$bus.$emit('bus',this.name)
    }
  }
}
</script>

Student1.vue

mounted() {
    this.$bus.$on('bus', (data) => { 
        console.log(data)
    })
},

六、$parent 或 $root

使用方法類似全局事件總結(jié)

Vue.prototype.$parent = this
// 傳數(shù)據(jù)
this.$parent.$emit('parent',this.age)
//接數(shù)據(jù)
this.$parent.$on('parent', (data) => {
    console.log(data);
})

七、vuex

  • 使用場景:復(fù)雜關(guān)系的組件數(shù)據(jù)傳遞
  • Vuex是一個用來存儲共享變量的容器
  • state:用來存放共享遍歷的地方;
  • getter:可以增加一個getter派生狀態(tài),用來獲得共享變量的值;
  • mutations:用來存放修改state的方法;
  • actions也是用來存放修改state的方法,不過action是在mutations的基礎(chǔ)上進(jìn)行的。常用來做一些異步操作。

八、總結(jié)

  • 父——>子:props;
  • 子——>父:$emit,ref;
  • 兄弟——>兄弟,任意——>任意:$bus。
  • 復(fù)雜關(guān)系:vuex。

到此這篇關(guān)于Vue組件通信深入分析的文章就介紹到這了,更多相關(guān)Vue組件通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • elementUI實(shí)現(xiàn)級聯(lián)選擇器

    elementUI實(shí)現(xiàn)級聯(lián)選擇器

    這篇文章主要為大家詳細(xì)介紹了elementUI實(shí)現(xiàn)級聯(lián)選擇器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed

    Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed

    這篇文章主要介紹了?Vue3?響應(yīng)式系統(tǒng)實(shí)現(xiàn)?computed,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下
    2022-06-06
  • Vue3 diff算法的簡單解刨

    Vue3 diff算法的簡單解刨

    如今Vue3的勢頭正盛,在diff算法方面也做了相應(yīng)的變化,利用到了最長遞增子序列把性能又提升了一個檔次。本文就來帶大家簡單解刨一下Vue3中的diff算法
    2023-02-02
  • Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié))

    Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié))

    這篇文章主要介紹了Nuxt升級2.0.0時出現(xiàn)的問題(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • Vue如何整合mavon-editor編輯器(markdown編輯和預(yù)覽)

    Vue如何整合mavon-editor編輯器(markdown編輯和預(yù)覽)

    這篇文章主要介紹了Vue整合mavon-editor編輯器(markdown編輯和預(yù)覽)的相關(guān)知識,mavon-editor是目前比較主流的markdown編輯器,重點(diǎn)介紹它的使用方法,需要的朋友可以參考下
    2022-10-10
  • vue-cli3.0項目打包后如何修改訪問后端地址

    vue-cli3.0項目打包后如何修改訪問后端地址

    這篇文章主要介紹了vue-cli3.0項目打包后如何修改訪問后端地址,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-03-03
  • Vue鍵盤事件用法總結(jié)

    Vue鍵盤事件用法總結(jié)

    本篇文章主要介紹了Vue鍵盤事件用法總結(jié),詳細(xì)的介紹了各種鍵盤事件的用法,有興趣的可以了解一下
    2017-04-04
  • 詳解vue生命周期

    詳解vue生命周期

    這篇文章主要為大家介紹了vue的生命周期,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • Vue?插槽?Slots源碼解析與用法詳解

    Vue?插槽?Slots源碼解析與用法詳解

    這篇文章主要介紹了Vue?插槽?(Slots)?源碼解析與用法,通過實(shí)例,我們?nèi)媪私饬四J(rèn)插槽、具名插槽和作用域插槽的用法,并深入理解了其在Vue源碼中的實(shí)現(xiàn)原理,需要的朋友可以參考下
    2024-01-01
  • vue使用xlsx導(dǎo)入到表格中示例代碼

    vue使用xlsx導(dǎo)入到表格中示例代碼

    這篇文章主要介紹了vue使用xlsx導(dǎo)入到表格中代碼,具體實(shí)現(xiàn)是先通過FileReader將上傳的文件讀取為二進(jìn)制數(shù)據(jù),然后使用xlsx將它解析成JSON數(shù)據(jù),最后將JSON數(shù)據(jù)填充到表格中,需要的朋友可以參考下
    2023-11-11

最新評論