vue子组件怎么向父组件传值

一，子组件主动触发事件将数据传递给父组件

<template>
<div>
这是子组件
<button @click="onClick">确定</button>
</div>
</template>
<script>
export default {
name: 'childModal',
data(){
dataInfo:[
{
id:"1",
name:"姓名1"
}，
{
id:"2",
name:"姓名2"
}
]
},
methods: {
//事件在子组件中触发的函数
onClick(){
const _this = this
_this.$emit('onChild', _this.dataInfo)
//子组件向父组件传值
}
}
}
</script>

<template>
<div>
这是父组件
<!-- 在父组件中绑定触发事件 -->
<child-Modal ref="childModal" @onChild="onChild"></child-Modal>
</div>
</template>
<script>
import childModal from './childModal'
export default {
name: 'Father',
components: {
childModal,
},
data(){
},
methods: {
//父组件触发函数显示子组件传递的数据
onChild(e){
console.log("获取子组件传过来的值：",e)
}
}
}
</script>

一，不需要在子组件中触发事件（如点击按钮，create（）事件等等）

<template>
<div>
这是子组件
</div>
</template>
<script>
export default {
name: 'childModal',
data(){
dataInfo:[
{
id:"1",
name:"姓名1"
}，
{
id:"2",
name:"姓名2"
}
]
},
methods: {
//在子组件中定义一个函数，这个函数是父组件可以直接调用的，函数的返回值定义为我们需要的数据
onChild(){
const _this = this
return _this.dataInfo
}
}
}
</script>

<template>
<div>
这是父组件
<button @click="onClick">确定</button>
<!-- 父组件注册子组件后绑定ref，调用子组件的函数获取数据 -->
<child-Modal ref="childModal"></child-Modal>
</div>
</template>
<script>
import childModal from './childModal'
export default {
name: 'Father',
components: {
childModal,
},
data(){
},
methods: {
onClick(){
const _this = this
//父组件函数调用
console.log("父组件函数调用",_this.$refs.childModal.onChild())
}
}
}
</script>

最后

以上就是灵巧热狗为你收集整理的vue子组件怎么向父组件传值的全部内容，希望文章能够帮你解决vue子组件怎么向父组件传值所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。