Vue_组件数据传递

一、父组件向子组件传值

一般使用v-bind：指令绑定数据，子组件用props接收。示例如下：

父组件：

<Child :id="name"></Child>

子组件：

props : {
	id: {
		default : null,
		type : Object
	}
}

二、子组件向父组件传值

子组件一般通过$emit方法向父组件传值，这里还可以用.snyc语法糖简写（用.snyc语法糖的话子组件写法不变）。示例如下：

子组件：

<template>
	<el-button @click="emitToParent">点击向父组件传值</el-button>
</template>
<script>
export default {
	name : 'Child',
	data() {
		return {
			value: [‘1’，‘2’，‘3’]
		}
	},
	methods: {
		emitToParent() {
			this.$emit('the-child', this.value)
		}
	}
}
<script>

父组件（不用.snyc）：

<template>
	<Child @the-child="getValue"/>
</template>
<script>
export default {
	components:{ Child },
	methods: {
		getValue(data) {
			console.log(data)
		}
	}
}
<script>

父组件（用.snyc）：

<template>
	<Child :value.snyc="value"/>
	<button @click="al">点击</button>
</template>
<script>
export default {
	components:{ Child },
	data() {
		return{
			value:''
		}
	}
	methods: {
		al() {
			console.log(this.value)
		}
	}
}
<script>

三、父组件调用子组件的方法（子向父传方法）

父组件运用this.$refs来调用子组件的方法。示例如下：

父组件：

<template>
	<Child ref="table"/>
</template>
<script>
export default {
	components:{ Child },
	methods: {
		reset() {
			this.$refs.table.resetAll()
		}
	}
}
<script>

子组件：

<script>
export default {
	name : 'Child',
	methods: {
		resetAll() {
			console.log('我是子组件的方法')
		}
	}
}
<script>

四、子组件调用父组件的方法（父向子传方法）

子组件运用this.$parent来调用父组件的方法。示例如下：

父组件：

<template>
	<Child/>
</template>
<script>
export default {
	components:{ Child },
	methods: {
		resetAll() {
			console.log('我是父组件的方法')
		}
	}
}
<script>

子组件：

<template>
	<el-button @click="show">点击调用父组件方法</el-button>
</template>
<script>
export default {
	name : 'Child',
	methods: {
		show() {
			this.$parent.resetAll()
		}
	}
}
<script>