Vue元件和元件構造器

vue.component()

這裡有乙個 vue 元件的示例：

// 定義乙個名為 button-counter 的新元件

vue.
component
('button-counter',}
,  template:
'you clicked me } times.'
})

"components-demo"

>
>
button-counter
>
div>

//註冊元件

newvue
()

extend建立的是乙個元件構造器，而不是乙個具體的元件例項，所以直接使用無法生效

元件構造器相當於vue.component()方法的第二個引數部分

註冊

"author"

>
div>

// 建立構造器

var au = vue.
extend(}
",data :
function()
}});
// 建立元件
vue.
component
('au'
,au)
;// 註冊
newvue
()

"author"

>
div>

// 建立構造器

var au = vue.
extend(}
",data :
function()
}});
// 建立au例項並掛載到乙個元素上
newau()
.$mount
('#author'
);

使用props

"author"

>
div>

var au = vue.

extend
(} & }",
data :
function()
},props :
['name']}
);//使用propsdata傳遞引數name
newau(}
).$mount
('#author'
);

Vue元件化之構造元件

在構建專案中盡可能的將頁面分成乙個個小的 可復用的元件。一 構造全域性元件 但必須在例項掛載的元素中使用 註冊元件 vue.component cpn,cpnc 給構造器中的模板命名為cpn 即標籤的名字 使用元件 二 語法糖註冊全域性元件 即將一二步合併 vue.component cpn com...

Vue元件通訊（關係元件和非關係元件）

元件是vue的乙個重要概念，有效的利用了封裝的思想 可以模擬js的函式或者類 我們通常會把乙個單頁應用中的各種模組拆分成乙個乙個單獨的元件，利用這些元件組裝成乙個完整的功能，具有很好的復用性和維護性。既然是封裝就涉及輸入和輸出，而多個元件之間如何處理輸入和輸出是我們經常會面臨到的問題，也是我們經常說...

Vue註冊區域性元件和全域性元件

1.新建components目錄，方便管理和修改 2.component資料夾下新建vueaudio元件,注意要用駝峰命名法或者短橫線命名法 export default 3.引用元件 import vueaudio from components vueaudio export default 1...