<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試實例 - 菜鳥教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<button onclick="load">動態加載組件</button>
<component v-bind:is="currentTabComponent" :message="message"></component>
</div>
<script>
// 註冊
Vue.component('child', {
// 聲明 props
props: ['message'],
// 同樣也可以在 vm 實例中像 “this.message” 這樣使用
template: '<span>{{ message }}</span>'
})
// 創建根實例
new Vue({
data:function(){
return {
currentTabComponent:null,
message:'hello!'
}
},
methods:{
load:function(){
this.$currentTabComponent = 'child';
}
},
el: '#app'
})
</script>
</body>
</html>
注意：
Prop 的大小寫 (camelCase vs kebab-case)
HTML 中的特性名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋爲小寫字符。這意味着當你使用 DOM 中的模板時，camelCase (駝峯命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名：
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>
重申一次，如果你使用字符串模板，那麼這個限制就不存在了。