vue-組件
阿新 • • 發佈：2017-06-23
ppt htm doctype name 世界 特殊 word keyword 否則
組件？
組件（Component）是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素， Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生 HTML 元素的形式，以 is 特性擴展。
1.全局組件
//全局組件必須在Vue實例化之前編寫好，才能調用，否則報錯
要註冊一個全局組件，你可以使用 Vue.component(tagName, options)。 例如：
| Vue.component(‘my-component‘, { // 選項 }) |
2.局部組件
不必在全局註冊每個組件。通過使用組件實例選項註冊，可以使組件僅在另一個實例/組件的作用域中可用：
| var Child = { template: ‘<div>A custom component!</div>‘ } new Vue({ // ... components: { // <my-component> 將只在父模板可用 ‘my-component‘: Child } }) |
這種封裝也適用於其它可註冊的 Vue 功能，如指令。
??：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<my-component></my-component>
<apptemp></apptemp>
</div>
<script src="js/vue.js"></script>
<script>
//創建全局組件
Vue.component(‘apptemp‘,{
template:‘<span>心中的太陽</span>‘
})
//全局組件必須在Vue實例化之前編寫好，才能調用，否則報錯
new Vue({
el: ‘#app‘,
data: {
msg: "世界你好"
},
components:{//局部組件
‘my-component‘:{
template:"<h1>你好,我的世界！</h1>"
}
}
})
</script>
</body>
</html>
vue-組件