不囉唆, 先上重點
https://vuejs.org/v2/guide/components.html
HTML attributes are case-insensitive, so when using non-string templates, camelCased prop names need to use their kebab-case (hyphen-delimited) equivalents:
在HTML 中 是不分大小寫的, 但是在javascript 中大小寫是不一樣的 , 所以在vue.js 中做componets 資料的雙向綁定時 必須要把大小寫的變數名轉換為kebab-case (-號區分）
請參考
https://en.wikipedia.org/wiki/Letter_case#Special_case_styles
範例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="//unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
In parent:{{currentView}}
<br/>
<button @click="setView('A')" class="btn">a</button>
<button @click="setView('B')" class="btn">b</button>
<component :is="currentView" :msg-obj="msgObj">
<p>This is some original content</p>
<p>This is some more original content</p>
</component>
</div>
<script type="text/x-template" id="A">
<h1>A.This is {{msgObj.a}}</h1>
</script>
<script type="text/x-template" id="B">
<h1>B. This is {{msgObj.b}}</h1>
</script>
<script>
Vue.component('A', {
props: ['msgObj'],
template: '#A'
});
Vue.component('B', {
props: ['msgObj'],
template: '#B'
});
var app = new Vue({
el: '#app',
data: {
currentView: '',
msgObj: {
a: 'msga',
b: 'msgb'
}
},
methods: {
setView: function(setViewOption) {
this.currentView = setViewOption;
}
}
});
</script>
</body>
</html>
關鍵在
<component :is="currentView" :msg-obj="msgObj">
<p>This is some original content</p>
<p>This is some more original content</p>
</component>
msgObj => msg-obj
END
