持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

需求

其需求就是，在父组件（parents.vue）点击确定按钮后，会打印出它子组件（children）表单里面的值

(前提:整个页面也就是父组件,里面样式结构是: 一个表单外加一个 按钮,但是呢,因为变单内容太多了,就创建了子组件,也就是说除了变单是子组件里面的内容,其他的都是父组件里面的内容,这时需要我们点击按钮后,获取子组件里面的变单内容,从而对此变单进行操作)

想法

最开始想的就是利用 emit完成子向父传值，但是呢，后来一想 emit是要配合其子组件一个什么样的事件，才能使用，（因为emit它是通过一个事件，通知父组件进行 修改，关闭或做其他的）而我们的按钮却在父组件里,不在子组件

这时 $refs就是最好的选择,因为它不像emit 它的使用,如下

使用1:子组件打印

父组件(引用什么的都省略了,你们自己写的时候别忘记了)

<children ref="config" />

methods:{
    childrenFun() {
        this.$refs.config.childrenMe()
    }
}

子组件

methods:{
    childrenMe() {
        console.log('111')
    }
}

但是呢,这样一来,它里面的内容是在子组件里打印出来的,因此才有了接下来的操作

使用2: 父组件打印

父组件

<children ref="config" @func="getChildren"/>

data() {
  return{
    childrenList: {}      
  }
}
methods:{
    childrenFun() {
        this.$refs.config.childrenMe()
    },

    // 获取子组件的值
    
    getChildren(data) {

       this.childrenList = data
        
        console.log('子组件的值',this.childrenList )
    }
}

子组件

methods:{
    childrenMe() {
       // func:是父组件指定的传数据绑定的函数
       this.$emit('func',this.childrenList)
    }
}

这样一来,子的内容就在 父组件里面打印出来了

​