先来点干货
我也是刚开始学习，因为要想学习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>
