vue父子组件传值

一、父组件向子组件传值

//父组件代码
<template>
	<div class="index">
		<Header :ishidden="你好！我是父组件数据"/>        //通过v-bind:ishidden传值为子组件
		<Footer />
	</div>
</template>

<script>
	import Header from '../components/Header.vue'         //头部组件
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		components: {
	  		Header
	  	}
	}	
</script>

//子组件代码
<template>
	<div class="banner">{{ ishidden }}</div>
</template>
<script>
	export default {
		props:{
			ishidden: ''
		}，
		data: {

		},
		methods: {

		}
	}
</script>

二、子组件向父组件传值

//子组件代码
<template>
	<div class="child" @click="childClick"></div>
</template>
<script>
	export default {
		data() {
			childValue: '我是子组件的数据'
		},
		methods: {
			childClick() {
                this.$emit('childValue', this.childValue)
            }
		}
	}
</script>

//父组件代码
<template>
	<div class="index">
		<Header :ishidden="true" v-on:childValue="childValue"/>
		{{ name }}
	</div>
</template>

<script>
	import Header from '../components/Header.vue'         //头部组件
	export default {
		data() {
			return {
				name:""
			}
		},
		methods: {
			childValue: function(childValue) {
				this.name = childValue;
			}
		},
		components: {
	  		Header
	  	}
	}	
</script>