1. 程式人生 > >vue 組件學習

vue 組件學習

作用域 rop log img 全局組 nbsp 傳遞數據 技術分享 作用

1、定義全局組件

html:

技術分享圖片

js:

技術分享圖片

技術分享圖片

輸出結果:

技術分享圖片

2、定義局部組件(只在當前作用域有效)

html:

技術分享圖片

js:

技術分享圖片

技術分享圖片

3.組合組件

1.使用props 傳遞數據(子組件使用父組件的數據)

html:

技術分享圖片

js:

技術分享圖片

輸出結果:<span>hello</span>

動態props:

我們可以用 v-bind 來動態地將 prop 綁定到父組件的數據。每當父組件的數據變化時,該變化也會傳導給子組件:

html:

技術分享圖片

js:

技術分享圖片

vue 組件學習