vue--组件传值

今天梳理一下vue中一个重要的知识点就是组件中传值。
一、组件传值的三种方式:
(1)、父级组件传值给子级。
(2)、子级组件传值给父级。
(3)、非父子级传值
二、父级组件传值给子级:通过自定义一个属性来向子级传值

//父级组件
<template>
	<div>
		<h1>hello world</h1>
		<Children :msg="message"></Children>   //msg这个自定义属性
	</div>
</template>
<script>
import Children from ""./components/Children
	export default {
		components:{
			Children
		},
		data(){
			return{
				message:"我是父级组件中的值"
			}
		}
	
	}
</script>

//子级组件
<template>
	<div>
		<h1>{{msg}}</h1>
	</div>
</template>
<script>
	export default{
		props:["msg"]
	}
</script>

三、子级组件值传给父级组件:通过自定义事件

//父级组件
<template>
	<div>
		<h1>{{childData}}</h1>
		<Children @myevent="getChildData"></Children>  //myevent这个自定义事件
	</div>
</template>
<script>
import Children from "./components/Children"
	export default{
		components:{
			Children
		},
		data(){
			return{
				childData:""
			}
		},
		methods:{
			getChildData(childData){
				this.childData = childData;
			}
		}
	}
</script>

//子级组件
<template>
	<div>
		<h1 ></h1>
		<button @click="sendData">传递数据</button>
	</div>
</template>
<script>
export default{
	data(){
		childData:"我是子级组件的值"
	},
	methods:{
		sendData(){
			this.$emit("myevent",this.childData)
		}
	}
}
</script>

四、非父子级组件之间的传值:通过定义store.js来实现

//父组件
<template>
	<div>
		<Brother></Brother>
		<Sister></Sister>
	</div>
</template>
<script>
import Brother from "./components/Brother";
import Sister from "./components/Sister";
	export default{
		components:{
			Brother,
			Sister
		}
	}
</script>
//子组件1
<template>
	<div>
		<h1>brother <button @click="changeData">改变数据</button></h1>
		<p>{{state.message}}</p>
	</div>
</template>
<script>
import store from "../store";
data(){
	return{
		state:store.state
	}
},
//通过brother中的changeData方法来改变state中的公共数据
methods:{  
	changeData(){
		store.setStateMessage("brother data")
	}
}
</script>
//子组件2
<template>
	<div>
		<h1>sister</h1>
		<p>{{state.message}}</p>
	</div>
</template>
<script>
import store from "../store";
export default{
	data(){
		return{
			state:store.state
		}
	}
}

</script>

//store.js文件
export default{
//状态中存放公共数据
	state:{
		message:"hello world"
	},
//通过方法来操作数据
	steStateMessage(str){
		this.state.message = str;
	}
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值