先來點乾貨
我也是剛開始學習，因爲要想學習Weex 框架就必須學習 Vue ,我也是在學習的路上~~~
記一次學習到了Component 組件之 父子組件遇到的問題
1.在設置屬性的時候發現v-bind 指令使用的時候報錯，原來子組件的想要綁定data數據中的東西需要
在父控件中設置數據，如果再創建的Vue 對象中設置data 會報錯而不顯示，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>components</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="component1">
<Con :local='locals'></Con>
</div>
<script>
var cityComponent = {
template: `
<p>{{cityProps}}</p>
`,
props: ['cityProps']
};
var contentComponent = {
components: {
'city': cityComponent
},
data: () => {
return {
citys: '山東'
}
},
template: `
<div>
<p>{{local}}</p>
<city :cityProps='citys'></city>
</div>
`,
props: ['local']
};
new Vue({
el: '#component1',
data: {
locals: '中國',
},
components: {
"Con": contentComponent
}
})
</script>
</body>
</html>2 . demo實現選項卡切換效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Component4</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" v-on:click='change'>
<component :is="who" :com='who'></component>
</div>
</body>
<script>
var com1 = {
template: `
<div><button style='background-color:red'>{{com}}</button></div>
`,
props: ['com']
};
var com2 = {
template: `
<div><button style='background-color:green'>{{com}}</button></div>
`,
props: ['com']
};
var com3 = {
template: `
<div><button style='background-color:pink'>{{com}}</button></div>
`,
props: ['com']
}
var coms = new Vue({
el: '#app',
data: {
who: 'com1'
},
methods: {
change: () => {
if (coms.who == 'com1') {
coms.who = 'com2';
} else if (coms.who == 'com2') {
coms.who = 'com3';
} else {
coms.who = 'com1';
}
}
},
components: {
"com1": com1,
"com2": com2,
"com3": com3,
}
})
</script>
</html>
