provide / inject
props (父傳子)
$emit (子傳父)
eventbus (全域性vue例項物件)
vuex (狀態管理)
$parent / $children / ref (獲取元件例項)
$attrs
$listeners
vue.observable
mixin
路由傳值 / 引用資料型別值傳遞實現父子間資料的共享
接下來我們具體實現這幾種方式是如何實現元件之間值傳遞的。
1. provide / inject這一組選項需要一起使用，允許乙個祖先元件向其所有的後代元件注入乙個依賴，不論元件層級有多深，並在其上下游關係成立的時間裡始終生效。
// provide 選項應該是乙個物件或返回乙個物件的函式
// inject 選項應該是：乙個字串陣列，或乙個物件，物件的 key 是本地的繫結名
// 父級元件提供 'foo'
var provider =
,// ...
}// 子元件注入 'foo' (陣列形式)
var child =
// ...
}或 （物件形式）
var child =},
created()
// ...
}
// 使用乙個注入的值作為資料(data)的入口 或者 屬性（props）的預設值
const child =}}
const child =}}
}------
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
----
-// 注入可以通過設定預設值使其變成可選項
const child =}}
// 與 prop 的預設值類似
const child =
}}
props (父傳子)
// 建立元件
vue.
component
('props-demo-advanced',}
})// 父元件中註冊和使用元件，並傳值
"age"
>
<
/props-demo-advanced>
$emit (子傳父)
// 子元件child， 負載payload可選
this
.$emit
('eventname'
, payload)
// 父元件 parent
"sayhi"
>
<
/parent>
eventbus, 全域性建立vue例項，進行事件監聽和資料傳遞。同時vuex也是基於這個原理實現的
// 三步使用
// 1. 建立
window.$bus =
newvue()
// 2. 註冊事件
window.$bus.
$on(
'user_task_change'
,(payload)
=>
)// 3. 觸發
window.$bus.
$emit
('user_task_change'
, payload)
vuex (狀態管理)此處會單獨寫一章內容來總結, 鏈結。
$parent / $children / $refs (獲取元件例項)$refs 獲取對應元件例項，如果是原生dom，那麼直接獲取的是該dom
$parent / $children 該屬性只針對vue元件，獲取父/子元件例項
注： 節制地使用 $parent 和 $children - 它們的主要目的是作為訪問元件的應急方法。更推薦用 props 和 events 實現父子元件通訊
// 父元件，helloworld.vue
="hello"
>
"ipcref"
>
<
/ipc>
<
/div>
<
/template>
import ipc from
'./ipc'
export
default},
mounted()
, components:
}<
/script>
// 子元件， ipc.vue
<
/div>
<
/template>
export
default
,data()
},mounted()
}<
/script>
$attrs1） 包含了父作用域中不作為 prop 被識別 (且獲取) 的特性繫結 (class 和 style 除外)
2） 當乙個元件沒有宣告任何 prop 時，這裡會包含所有父作用域的繫結 (class 和 style 除外)
可以通過v-bind="$attrs" 將所有父作用域的繫結 (class、style、 ref 除外) 傳入內部元件
注: 在建立高階別的元件時非常有用
// 根元件helloworld.vue 中引入 ipc.vue
koa=
"ipcref"
name=
"go"
id="id"
ref=
"ref"
style=
"border: 1px solid red;"
class
="classname"
>
<
/ipc>
// ipc.vue 中引入 ipcchild.vue
"$attrs" selfdefine=
"selfdefine"
>
<
/ipcchild>
<
/div>
<
/template>
import ipcchild from
'./ipcchild'
export
default
,mounted()
}}<
/script>
// ipcchild.vue中列印接收到的$attrs
export
default"}
}<
/script>
$listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件***
通過 v-on="$listeners" 將父作用域的時間***傳入內部元件
a、b、c三個元件依次巢狀, b巢狀在a中，c巢狀在b中。 借助 b 元件的中轉，從上到下props依次傳遞，從下至上，$emit事件的傳遞，達到跨級元件通訊的效果。$attrs以及$listeners的出現解決的的問題，b 元件在其中傳遞props以及事件的過程中，不必在寫多餘的**，僅僅是將$attrs以及$listeners向上或者向下傳遞即可。
vue.observable
mixin （混入） (謹慎使用全域性混入, 如有必要可以設計外掛程式並引入使用)參見官方文件
乙個混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被「混合」進入該元件本身的選項
當元件和混入物件含有同名選項時，這些選項將以恰當的方式進行「合併」。資料物件在內部會進行遞迴合併，並在發生衝突時以元件資料優先。
同名鉤子函式將合併為乙個陣列，因此都將被呼叫。另外，混入物件的鉤子將在元件自身鉤子之前呼叫。
值為物件的選項，例如 methods、components 和 directives，將被合併為同乙個物件。兩個物件鍵名衝突時，取元件物件的鍵值對。
路由傳值 / 引用資料型別值傳遞實現父子間資料的共享
vue元件之間傳值方式
vue元件之間傳值方式解析 一.父元件傳到子元件 1.父元件parent 如下 2.子元件son 如下 子元件接收到內容 3.效果圖如下 二.子元件向父元件傳值 通過繫結事件然後及 emit傳值 1.父元件parent 如下 父元件接手到的內容 2.子元件son 如下 子元件接收到內容 傳值3.效果...
vue元件之間的傳值方式
父元件向子元件傳遞資料 父元件中通過繫結屬性傳遞資料 子元件通過props接收資料 使用 單向資料流 父元件可以向子元件通過屬性形式傳遞引數，傳遞的引數也可以隨時隨意修改 但子元件不能修改父元件傳遞過來的引數，只能使用父元件傳遞的資料 sync修飾符 事件繫結的語法糖，應用於父子元件傳值時，且子元件...
vue 元件之間的傳值方式彙總（元件傳值彙總）
元件之間存在的三種關係 元件傳值的方式 props 父傳子 emit on 子傳父 bus emit on 事件匯流排。匯流排傳值 vuex 狀態管理 attrs listeners parent children provide inject localstorage sessionstorage...