【Vue学习笔记】—— 组件之间传递数据 { }

学习笔记

• 作者：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",
})