vue父子组件之间的传值(子传父,父传子)
前提首先需要了解vue中组件之间的父子关系。
主组件mainPage.vue
<template>
<view class="body">
<view class="header">
{{text}}
</view>
<view class="main">
<msg @getMsg="openMsg" :name="name"></msg>
</view>
</view>
</template>
<script>
import msg from '../../components/msg.vue'
export default {
components: {msg},
data() {
return {
text:'',
name:'parent',
}
},
methods: {
openMsg(msg){
this.text=msg
console.log(msg)
}
},
}
</script>
从代码中可以看出mainPage.vue引用了msg.vue这个主键可以知道msg.vue是mianPage.vue的子组件
子传父的方式传值:
通过在方法中使用
this.$emit('值名称',"所需要传的值")
,将子组件中的值传给父组件
在父组件中需要使用该值的标签上添加@值名称=“方法”
在该方法中就可以得到该值
如下:
msg.vue
<template>
<view>
<button type="primary" @click="sendMsg">发送消息</button>
</view>
</template>
<script>
export default {
props:{
name:String,
},
name:"msg",
data() {
return {
};
},
methods:{
sendMsg(){
this.$emit('getMsg',"我是子主键,"+this.name)
}
}
}
</script>
<template>
<view class="body">
<view class="header">
{{text}}
</view>
<view class="main">
<msg @getMsg="openMsg" :name="name"></msg>
</view>
</view>
</template>
<script>
import msg from '../../components/msg.vue'
export default {
components: {msg},
data() {
return {
text:'',
name:'parent',
}
},
methods: {
openMsg(msg){
this.text=msg
console.log(msg)
}
},
}
</script>
点击:
显示:{{text}}
我是子主键,则说明子传父成功
父传子的方式传值:
父组件中使用
:name
=“值”,同时父组件中包含该值
子组件中通过props:{
//该name与父组件中:name一致
name
:String, //这里String 是数据类型
},
在子组组件中通过this.name获取该值
#父主键mainPage.vue
<msg @getMsg="openMsg" :name="name"></msg>
子组件msg.vue
export default {
props:{
name:String,
},
name:"msg",
data() {
return {
};
},
methods:{
sendMsg(){
console.log(this.name)
}
}
}
显示:
说明父传子成功!!!