学习笔记
作者：oMing
Vue 组件
1.通过绑定传递数据（父组件 ——》 子组件）
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<h1>father:{{ fatherMsg.name }} -- {{ fatherMsg.age }}
</h1>
<son :faobj='fatherMsg'></son>
</div>
</template>
<template id="son">
<div>
<input type="button" @click='getFather' value="获取一个父亲">
<h1>小头儿子:my father -- {{ faobj.name }} -- {{ faobj.age }}
</h1>
</div>
</template>
Vue
.component('father', {
template
: '#father',
data
: function () {
return {
fatherMsg
: {
name
: '小头爸爸',
age
: '21'
}
}
},
components
: {
son
: {
template
: '#son',
data
: function () {
return {
fobj
: {
name
: '',
age
: ''
}
}
},
props
: ['faobj'],
methods
: {
getFather() {
this.fobj
= this.faobj
}
}
}
}
})
new Vue({
el
: "#app",
})
2.通过事件传递数据 （子组件 ——》 父组件）
<div class="app">
<father></father>
</div>
<template id="father">
<div>
<h1>father: mySon -- {{ sonObj.name }} -- {{ sonObj.age }}
</h1>
<son @stof='getSon'></son>
</div>
</template>
<template id="son">
<div>
<h1>son: {{ sobj.name }} -- {{ sobj.age }}
</h1>
<input type="button" value="投入到父亲的怀抱" @click='sonToFather'>
</div>
</template>
Vue
.component('father', {
template
: '#father',
data
: function () {
return {
sonObj
: {
name
: '',
age
: ''
}
}
},
methods
: {
getSon(son
) {
this.sonObj
= son
}
},
components
: {
son
: {
template
: '#son',
data
: function () {
return {
sobj
: {
name
: '大耳朵图图',
age
: '1'
}
}
},
methods
: {
sonToFather() {
this.$emit('stof', this.sobj
)
}
}
}
}
})
new Vue({
el
: ".app",
})
