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


版权声明:本文为m0_62956518原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。