元件基礎（非父子元件傳值） Vue學習筆記

最近幾天忙著寫api去了，抽空把後面的內容下出來，然後再分享給大家web可以使用的api。

上次說了父子元件直接的傳值，這次看一下非父子元件之間的傳值（匯流排機制）

要實現非父子元件之間的傳值非常重要的一行**如下

vue.prototype.young=new vue();//在vue例項上掛載乙個為young的屬性（指向vue例項），當然young使隨便取的。

先建立乙個基礎框架

<

body
>
<
div 
id>
<
hello 
message
="youngam"
>
hello
>
<
hello 
message
="hi boy"
>
hello
>
div>
body
>
<
script
>
vue.prototype.young
=new
vue();
//在vue例項上掛載乙個為young的屬性（指向vue例項）
vue.component(
"hello",}
',props:[
'message']
})var=
newvue()
script
>

現在我們需要實現點選乙個名字，讓另乙個的內容變為點選的內容。

前面我們給vue.prototype掛載了乙個young現在我們通過這個young來實現非父子元件之間的傳值。

給元件乙個點選事件，通過新增的young來實現向上傳遞事件『change』並把當前元件的message值傳出去。

mounted為vue自帶的生命週期鉤子，當元件被掛載時執行。

this.young.$on()用來監聽事件，這裡接受的是元件傳出來的change。

由於執行change事件時this的作用域發生了改變，

所以我們需要在還未改變時給他乙個備份。var _this=this;

最後賦值就行了。

這是由於vue機制引起的。

vue中規定子元件不得改變父元件的值。

所以我們可以改寫成這樣。

再見，一夢一黃粱。

vue非父子元件傳值

1.新建vueevent.js，建立例項 import vue from vue var vueevent new vue export default vueevent 2.在需要傳值的元件中引入例項 import vueevent from model vueevent.js 3.通過vueev...

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件，從業務上看，該父元件有可能對子元件有個性化需求，為了體現元件的靈活多變，可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值，具體通過pro...

Vue 初級 非父子元件傳值

非父子元件傳值 1 新建乙個js檔案 然後引入vue 例項化vue 最後暴露這個例項 2 在要廣播的地方引入剛才定義的例項 3 通過 vueemit.emit 名稱 資料 4 在接收收資料的地方通過 om接收廣播的資料 vueemit.on 名稱 function data 下面雖然可以做到非元件傳...