元件通過props來接收傳遞過來的值
vue.
component
('a-item',}
'})
父元件通過屬性傳遞值給子元件"父元件的值"
>
<
/a-item>
//靜態的值
"n">
<
/a-item>
//動態的值
**注意:**在props中使用駝峰命名時,在末班中需要用短橫線方式,字串模板中沒有限制。
例:
vue.
component
('a-item',}
` //字串模板依舊可用駝峰})
"父元件的值"
>
<
/a-item>
//短橫線 an-tip
子元件自定義事件
在子元件中繫結方法$emit( )實現自定義事件,在 $emit( )中傳入引數:自定義事件的名稱和傳值。
vue.
component
('a-item',)
"父元件的值"
>
<
/a-item>
//短橫線 an-tip
父元件中使用自定義事件和寫入自定義事件函式
父元件通過$event來接收子元件傳來的值
'add($event)'
>
<
/a-item>
method:
}<
/script>
單獨的事件中心管理元件間的通訊var eventhub =
newvue
()
監聽事件和銷毀事件eventhub.
$on(
'add-todo'
, addtodo)
//事件名稱:add-todo 事件函式:addtodo
eventhub.
$off
('add-todo'
)
觸發事件eventhub.
$emit
('add-todo'
, id)
//事件名稱:add-todo 傳遞引數:id
Vue2 0元件之間資料互動和通訊
vue2.0元件之間資料互動和通訊。vue2.0廢棄了dispatch 和 broadcast,如何在實現元件之間的資料互動和通訊?下面是乙個簡單的demo解決了這個問題。事件中心 evengthub.js 定義事件中心,在模板通訊是使用。import vue from vue export def...
Vue同級(兄弟)元件間資料的傳遞
同級 兄弟 元件間不能直接傳遞資料,需要建立乙個類似橋梁的載體去實現。1 定義乙個公共檔案public.js,建立位置工程src目錄下與main.js同級 內容是建立乙個空的vue例項 import vue from vue export default new vue 2 建立好以後,同級 兄弟 ...
Vue入門和基礎 Vue父子元件之間資料的傳遞
父子元件之間資料的傳遞 在html中使用元素,會有一些屬性,還可以繫結事件,當然,在乙個元件中定義並使用了其他元件,就會利用子元件的屬性和事件和父元件進行資料互動 那麼子元件和父元件之間是如何進行資料的傳遞的呢?1 父子元件之間通過props 2 子父元件之間通過 emit vue元件通過props...