vue组件传值

vue组件传值

1、父组件给子组件传值

父组件给子组件传值时，子组件利用props属性获取数据。
父组件的代码为：

<template>
	<div id = " app ">
    <input style = " text " v-model = " f " >
		父组件的值：{{ f }}
    <son :z="f"></son>
	</div>
</template>
<script>
import Son from './views/Son.vue'
	export default{
		components:{
			'son':Son
		},
	data(){
		return{
			f: '',
		}
	}
	}
</script>
<style>
input{
  display: block;
}
</style>

子组件的代码为：

<template>
	<div>
		子组件获取的父组件的值：{{ z }}
	</div>
</template>
<script>
	export default{
		props:{
			z:String,
		}
	}
</script>
<style>
</style>

2、子组件给父组件传值

子组件传值给父组件主要用的是this.$emit(‘enentName’,arguments)方法来实现的。
父组件的代码为：

<template>
	<div id = "app">
		子组件传递给父组件的值为：{{z}}
		<son @get = "getData"></son>
	</div>
</template>
<script>
import Son from './views/Son.vue'
export default{
	components:{
		'son':Son
	},
	data(){
		return{
			z:''
		}
	},
	methods:{
		getData(val){
			this.z = val
		}
	}
}
</script>
<style>
input{
	display:block;
}
</style>

子组件的代码为：

<template>
	<div id = "app">
		<input style = "text" v-model = "z">
	</div>
</template>
<script>
export default{
	data(){
		return{
			zi:''
		}
	},
	watch:{
		zi(val){
			this.$emit('get',val)
		}
	}

}
</script>
<style>
</style>

3、子组件给子组件传值

子组件给子组件传值，首先子组件要利用this.$emit(‘enentName’,argunents)将值传给父组件，父组件再利用父组件给子组件传值的方法将值传递给另一个子组件，即另一个子组件将利用props属性获取父组件的值。
项目中需要三个组件，一个父组件和两个子组件。
父组件（App.Vue）:

<template>
	<div id="app">
		从子组件1获取的值为：{{a}}
    <hr>
		<son1 @get = "getData" :b="a"></son1><hr>
		<son2 :c="a"></son2>
	</div>
</template>
<script>
import Son1 from './views/Son1.vue'
import Son2 from './views/Son2.vue'
export default{
	components:{
		'son1':Son1,
    'son2':Son2,
	},
	data(){
		return{
			a:''
		}
	},
	methods:{
		getData(val){
			this.a = val
		}
	},
}
</script>
<style>
</style>

子组件1（Son1.vue）:

<template>
	<div >
	<input style = "text" v-model = "b">
		子组件1输入的值为：{{b}}
	</div>
</template>
<script>
export default{
	data(){
		return{
			b:''
		}
	},
	watch:{
		b(val){
			this.$emit('get',val)
		}
	}
}
</script>
<style>
</style>

子组件2（Son2.vue）:

<template>
	<div >
		子组件2从父组件或取的值为：{{c}}
	</div>
</template>
<script>
export default{
	props:{
		c:String
	},
}
</script>
<style>
</style>