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>