vue元件之間的通訊

2021-09-02 22:42:20 字數 1009 閱讀 1009

作為乙個vue初學者不得不了解的就是元件間的資料通訊(暫且不談vuex)。通訊方式根據元件之間的關係有不同之處。元件關係有下面三種父-->子子-->父非父子

父-->子

父向子傳遞資料通過props

**父元件****

**子元件****

}

子-->父

子元件向父元件傳遞分為兩種型別。

1、子元件改變父元件傳遞的props(你會發現通過props中的object型別引數傳輸資料,可以通過子元件改變資料內容。這種方          式是可行的,但是不推薦使用,因為官方定義prop是單向繫結)

2、通過on和emit

*通過props實現傳遞*

**父元件****

**子元件****

}

*通過$on,$emit*

**父元件****

}

**子元件****

}

非父子

**main.js**

let bus = new vue()

vue.prototype.bus = bus

或者

**main.js**

new vue(

})

**header元件**

}

**footer元件**

}export default )

},data ()

}}

vue元件之間通訊

個人blog,歡迎關注加收藏 元件之間通訊的幾種方式 1.父向子傳資料 props 2.子向父傳資料 emit 3.兄弟元件傳資料 a.事件匯流排 bus 在父元件的data中bus new vue 建立 事件匯流排 b.傳遞資料 this.roo t.bu s.root.bus.root.b us...

Vue元件之間通訊

vue元件傳值有以下幾種情況 父元件向子元件傳值 子元件向父元件傳值 兄弟元件之間傳值等 一 父元件向子元件傳值 傳值方式 props 動態傳遞值 子元件son 靜態傳值 父元件 子元件 son 1 prop的大小寫 html中的attribute名對大小寫不敏感,所以prop中的駝峰值需要等價於短...

vue元件之間的通訊

區域性元件 區域性元件必須手動掛載,不然無法生效。全劇元件 全域性元件不需要手動掛載,但不常用,盡量不要在全域性上掛載變數或者元件 影響瀏覽器效能 配合模板實現元件之間的巢狀。元件是vue.js最強大的功能之一,核心目標是擴充套件htnl元素,封裝可重用 元件可按照template,style,sc...