今天梳理一下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;
}
}