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

vue中的非父子間的通訊問題簡單的實例代碼

 更新時間:2017年07月19日 11:37:21   作者:有一個王小森  
這篇文章主要介紹了vue中的非父子間的通訊問題簡單的實例代碼,需要的朋友可以參考下

官網(wǎng)上的例子好晦澀,看了一個頭兩個大,關(guān)于非父子間的通訊問題,經(jīng)過查閱得到了下面的例子,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>兄弟之間的通訊問題</title>
  <script src="vue.js"></script>
</head>
<body>
<div id="app">
<one></one>
<two></two>
</div>
<script>
  //創(chuàng)建中央事件總線。
    var bus =new Vue();
//  組件one
  Vue.component('one',{
    template:'<button v-on:click="oneFn">點擊+</button>',
    data:function () {
      return{
        oneNum:0
      }
    },
//    為組件one創(chuàng)建方法,用來觸發(fā)事件common(common是中央事件總線bus的自定義事件名稱,只需要與two中的監(jiān)聽事件名稱一致即可。
    methods:{
      oneFn:function () {   
        bus.$emit("common", this.oneNum+=1)//此處的參數(shù)即為two中監(jiān)聽事件中傳入的參數(shù)(n),此處(觸發(fā))的this指的是組件one,而在(監(jiān)聽)的this指的是bus。
      }
    }
  });
//  組件 two
  Vue.component('two',{
    template:'<p>{{twoNum}}</p>',
    data:function () {
     return {
       twoNum:0
     }
    },
//    為組件two創(chuàng)建鉤子,掛載$on監(jiān)聽事件,
    created:function () {
      var self = this;//將this賦值給self。
      bus.$on('common',function (n) {
        self.twoNum = n;//此處為self,表示是組件two的變量,若為this,則表示是bus的變量。
      })
    }
  });
new Vue({
  el:'#app'
})
</script>
</body>
</html>

我也是新手,剛開始自學Vue,上面有不懂的童鞋請留言,一起進步!

以上所述是小編給大家介紹的vue中的非父子間的通訊問題簡單的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 前端vue面試總問watch和computed區(qū)別及建議總結(jié)

    前端vue面試總問watch和computed區(qū)別及建議總結(jié)

    在現(xiàn)代前端的面試中,vue和react是面試過程中基本必問的技術(shù)棧,其中Vue響應(yīng)式話題,watch和computed是面試官非常喜歡聊的主題,雖然watch和computed它們都用于監(jiān)聽數(shù)據(jù)的變化,但它們在實現(xiàn)原理、使用場景和行為上有著顯著的區(qū)別,本文將深入探討,并提供一些面試過程中的建議
    2023-10-10
  • Vue源碼學習之響應(yīng)式是如何實現(xiàn)的

    Vue源碼學習之響應(yīng)式是如何實現(xiàn)的

    最近接觸了vue.js,一度非常好奇vue.js是如何監(jiān)測數(shù)據(jù)更新并且重新渲染頁面,這篇文章主要給大家介紹了關(guān)于Vue源碼學習之響應(yīng)式是如何實現(xiàn)的相關(guān)資料,需要的朋友可以參考下
    2021-10-10
  • vue-router 路由傳參問題(路由傳參方式)

    vue-router 路由傳參問題(路由傳參方式)

    路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結(jié)合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
    2023-11-11
  • 詳解Webstorm 新建.vue文件支持高亮vue語法和es6語法

    詳解Webstorm 新建.vue文件支持高亮vue語法和es6語法

    這篇文章主要介紹了Webstorm 添加新建.vue文件功能并支持高亮vue語法和es6語法,非常具有實用價值,需要的朋友可以參考下
    2017-10-10
  • Vue 兄弟組件通信的方法(不使用Vuex)

    Vue 兄弟組件通信的方法(不使用Vuex)

    本篇文章主要介紹了Vue 兄弟組件通信的方法(不使用Vuex),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • Vue中使用js-cookie詳情

    Vue中使用js-cookie詳情

    這篇文章主要介紹了Vue中使用js-cookie詳情,文章圍繞js-cookie的相關(guān)資料展開詳細內(nèi)容具有一定的的參考價值,需要的小伙伴可以參考一下
    2022-03-03
  • 在Vue項目中引入騰訊驗證碼服務(wù)的教程

    在Vue項目中引入騰訊驗證碼服務(wù)的教程

    這篇文章主要介紹了在Vue項目中引入騰訊驗證碼服務(wù)的教程,需要的朋友可以參考下
    2018-04-04
  • 詳解使用vuex進行菜單管理

    詳解使用vuex進行菜單管理

    本篇文章主要介紹了詳解使用vuex進行菜單管理,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12
  • Vue3?通過作用域插槽實現(xiàn)樹形菜單嵌套組件

    Vue3?通過作用域插槽實現(xiàn)樹形菜單嵌套組件

    這篇文章主要為大家介紹了Vue3?通過作用域插槽實現(xiàn)樹形菜單嵌套組件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • vite+vue3項目中使用SVG方式

    vite+vue3項目中使用SVG方式

    這篇文章主要介紹了vite+vue3項目中使用SVG方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評論