Vue子组件向父组件传值简单示例

Vue中子组件向父组件传值简单示例。首先在子组件中自定义一个事件，执行该事件时将子组件中的值传递到父组件。然后在父组件中的子组件上声明这个事件。最终在父组件声明的这个事件中即可接收到子组件传递的子值.

子组件：
		this.$emit("自定义事件名称","值")
父组件：
	<Footer @changeStr="changeBtn"></Footer><!--子组件-->
	methods:{
		changeBtn(data){
			console.log(data);
		}
	}

具体示例如下:在Footer组件中有一个按钮，点击以后传递Footer中的一个字符串到父组件
Footer.Vue中代码如下

<template>
	<div>这是底部</div>
	<button @click="btnClick">按钮</button>
</template>

<script>
	export default{
		data(){
			return{
				footerStr:"这里是要传递的Footer中的数据"
			}
		},
		methods:{
			btnClick(){
				this.$emit("changeStr",this.footerStr)
			}
		}
	}
</script>

<style>
	
</style>

App.Vue

<template>
	<div>
		<!--App.vue是父组件-->
		<Header :a='a'></Header><!--子组件-->
		<Swiper :arr='arr'></Swiper><!--子组件-->
		<Footer @changeStr="changeBtn"></Footer><!--子组件-->
	</div>
</template>

<script>
	import Header from "./components/Header.vue"
	import Swiper from "./components/Swiper.vue"
	import Footer from "./components/Footer.vue"
export default{
	data(){
		return {
			a:1,
			arr:['a','b','c']
		}
	},
	components:{
		Header,
		Swiper,
		Footer
	},
	methods:{
		changeBtn(data){
			console.log(data);
		}
	}
}
</script>

<style>
</style>

最终效果如下：