vue元件之間資料傳遞和通訊方式總結

vue元件之間資料傳遞和通訊方式總結

方式主要包括：

父元件=>子元件 | 單向資料流，props

子元件=>父元件 | 觀察者模式，即vue的自定義事件 $emit 和 $on

非父子元件通訊 | 中介者模式，即 **事件匯流排 bus

父子元件通訊 | 父鏈和子鏈

vuex 等狀態管理庫（略）

1 父元件=>子元件，props的兩個主要用法

將prop用於子元件的data

props:

['initialcounter'],
data:
function()
}

props:

['size'],
computed:
}

props傳值：父元件=>子元件

//靜態傳值

name
="zhangkai"
>
blog-post
>
//動態傳值
:name
="zhangkai"
>
blog-post
>
:num
="42"
>
blog-post
>
:ifsale
="false"
>
blog-post
>
:list
="[1,2,3]"
>
blog-post
>
:person=""
>
blog-post
>
:person
="person.name"
>
blog-post
>
//不帶引數的 v-bind，post=
v-bind
="post"
>
blog-post
>
//等價於
v-bind:id
="post.id"
v-bind:title
="post.title"
>
blog-post
>

詳細章節見

2 子元件=>父元件

//vue模板

>
class
="wrap"
>
v-on:add
="handletotal"
v-on:reduce
="handletotal"
/>
}div
>
template
>

//vue script

var mycomponent =;}
, methods:
,handlereduce()
}};export
default
,data()
;}, methods:}}
;

//vue模板

>
class
="wrap"
>
/>
>
}div
>
template
>
>

//vue script

import vue from
"vue"
;const bus =
newvue(}
);//乙個空的vue例項，做為【**事件匯流排】
const componenta =}}
;export
default
,data()
;},mounted()
);}}
;

//注意，this.$children 一般為陣列

this
.$children[0]
.age
//使用 ref 屬性，可以更容易找到子元件
//this
.$refs.agecom.age;

不要在子元件中修改 props 的值

重要！prop 的大小寫 (camelcase vs kebab-case)

//宣告乙個元件

vue.component('blog-post', }h3
>'})
//使用元件
post-title
="hello!"
>
blog-post
>

iPhone 應用view之間資料傳遞的方式

對於不同的viewcontroller之間資料的共享和處理，總結有下面幾種方式 1 採用 模式 子viewcontroller設計 協議，定義協議介面，父viewcontroller 實現協議介面，實現子viewcontroller 退出時將相關資料更新到父檢視。2 採用ios的訊息機制 父view...

MasterPage和內容頁之間資料傳遞

masterpage是asp.net 2.0中的乙個新東東。具有如下的優點 1.使用母版頁可以集中處理頁的通用功能，以便可以只在乙個位置上進行更新。2.使用母版頁可以方便地建立一組控制項和 並將結果應用於一組頁。例如，可以在母版頁上使用控制項來建立乙個應用於所有頁的選單。3.通過允許控制佔位符控制項...

vue元件間通訊 資料傳遞（父子元件，同級元件）

總結一下對vue元件通訊的理解和使用。子元件 page1.vue 子元件 page2.vue 單價 降價1元 數量 總金額 元 剩餘金額 元import page1 from components page1 components 此處的price則是傳遞給子元件的值 props 單價 單價 降價1...