我們知道,父元件使用 prop 傳遞資料給子元件。但子元件怎麼跟父元件通訊呢?這個時候 vue 的自定義事件系統就派得上用場了。
使用 繫結自定義事件v-on
每個 vue 例項都實現了事件介面,即:
使用 $on(eventname) 監聽事件
使用 $emit(eventname) 觸發事件
vue 的事件系統與瀏覽器的 eventtarget api 有所不同。儘管它們的執行起來類似,但是 $on 和 $emit 並不是addeventlistener 和 dispatchevent 的別名。
另外,父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件。
不能用 $on 偵聽子元件釋放的事件,而必須在模板裡直接用 v-on 繫結,參見下面的例子。
//定義子元件
var child = }`,
data()
},methods:
}}
//根元件
var vm = new vue(,
components: ,
methods:
}})//html
使用插槽分發內容
注意兩點:
元件不知道它會收到什麼內容。這是由使用 的父元件決定的。
元件很可能有它自己的模板。
為了讓元件可以組合,我們需要一種方式來混合父元件的內容與子元件自己的模板。這個過程被稱為內容分發 (即 angular 使用者熟知的「transclusion」)。vue.js 實現了乙個內容分發 api,參照了當前 web components 規範草案,使用特殊的 元素作為原始內容的插槽。
//slot插槽使其可以在html中傳入資料,也可以在其中傳入預設內容
var child =
var vm = new vue(
})html
hello
有名slot
//slot插槽使其可以在html中傳入資料,也可以在其中傳入預設內容
var child =
var vm = new vue(
})html
頭部內容
22222
底部內容
非父子元件
有時候,非父子關係的兩個元件之間也需要通訊。在簡單的場景下,可以使用乙個空的 vue 例項作為事件匯流排:
var bus = new vue()
template: '新增
', methods: }}
template: '}
', data()
},created() )}}
var vm = new vue (
})模態框例項
登入註冊
登入
靜態路由
不需要複雜的路由
首先需要
npm i -s vue-router 安裝router庫
var newscomponent =
var shopcomponent =
var notfoundcomponent =
var routes = [,,
,]
var router = new vuerouter()
// router
// })
router
})
動態路由
var goods = )}},
data()
}
vue子元件向父元件傳遞資料
vue專案中經常使用到元件之間的數值傳遞,實現的方法很多,但是原理基本上大同小異。子元件向父元件出傳遞資料,使用自定義事件的方式。父元件向子元件傳遞資料,使用props屬性的方式。推薦文章 vue筆記 父元件向子元件傳遞資料 我們可以從子元件中想父元件中傳遞多個資料,在子元件中要做的工作只是,使用t...
父元件向子元件傳遞資料 14 父元件向子元件通訊
1.不使用 v bind 傳遞資料 2.使用 v bind 傳遞資料 3.以上兩者的區別。先把重要的知識點寫在前面 簡單來說,父元件向子元件傳遞資料可以分為以下幾個步驟 在父元件繫結資料 在子元件使用 props 接收資料 在子元件使用資料。data components 渲染 2.在子元件上繫結 ...
vue父元件向子元件傳遞資料prop
今天學習vue學到使用prop父向子傳遞資料,學了半天也沒懂什麼意思,沒學懂 記住不 true 查了下別人的學習經驗發現基本上都是拷貝vue官網的介紹,哎,不要臉的真多,能咋辦 繼續研究唄 他說是父元件向子元件傳遞繫結的資料 子元件接收父元件資料,那就逆向推理一下 text align center...