在uniapp中,点击btn子组件,在父组件中获取子组件中的数据msg的内容,显示在页面中
时间: 2023-06-03 13:06:18 浏览: 77
vue父组件中获取子组件中的数据(实例讲解)
5星 · 资源好评率100%
您可以使用自定义事件的方式,在子组件中触发事件并传递参数,父组件通过监听该事件获取到子组件中的数据msg,然后在页面中进行展示。示例如下:
在子组件的template中:
<button @click="handleClick">点击</button>
在子组件的script中:
export default {
data() {
return {
msg: 'hello world'
}
},
methods: {
handleClick() {
this.$emit('getMsg', this.msg)
}
}
}
在父组件的template中:
<template>
<div>
<child @getMsg="handleGetMsg"></child>
<p>{{ msg }}</p>
</div>
</template>
在父组件的script中:
import Child from './components/Child.vue'
export default {
components: {
Child
},
data() {
return {
msg: ''
}
},
methods: {
handleGetMsg(msg) {
this.msg = msg
}
}
}
阅读全文