Vue子传父详细教程

子传父通过自定义事件，this.$emit（"自定义方法名1"，需要传的值）进行传值。

本文父组件：shopping.vue

子组件：shoplist.vue

1.第一步，在父组件中引入子组件（父组件内）

import shoplist from '../shoplist.vue'

2.在子组件内定义数据（子组件内）

data() {
            return {
                children:"this is children"
            };
        },

3.自定义一个方法，用于触发传值事件（子组件内）

<button @click="pass">子传父</button>

4. 通过方法传值（子组件内）

$("第一个参数为自定义方法名"，第二个参数为需要传递的值)

methods:{
            pass(){
                this.$emit("passfunction",this.children)
            }
        },

 5.在父组件定义一个自定义事件2接收子组件传递过来的事件（父组件内）

等于号前面@passfunction需和子组件自定义方法名一样

等于号后面为父组件自定义方法名，需和下方的方法名对应

<shoplist   @passfunction = "meetfunction"></shoplist> 

6.在data中定义一个值用来存储接收的值（父组件内）

通过自定义方法2接收传递过来的值（父组件内）

data() {
            return {
                meetdata:[],
            }
        }, 

methods: {
            meetfunction(val){
                this.meetdata = val
            }
        },

 最后meetdata中的数据即为子组件传的数据

父传子文章详细教程链接：https://blog.csdn.net/m0_62956518/article/details/124581942