父子组件之间的传值

最新推荐文章于 2024-11-02 12:42:04 发布

黄梅之俊雅

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量97

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_58511059/article/details/128526382

版权

父子组件之间的传值

（父传子）

父组件如何传值给子组件？
给子组件设置props属性就可以接受父组件传值。

（子传父）

在父组件中给引用的子组件注册一个事件（这个事件的名字是自定义的）
子组件可以触发这个事件$emit(‘事件名字’)

子组件给父组件传递数据

$emit方法第二个参数可以定义子组件给父组件传递的内容
在父组件中怎么拿到这内容
2.1 父组件这个方法没有自定参数，在父组件的方法直接加这个参数就可以拿到
2.2 父组件有自定义参数，可以传入$ event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

这是父组件

<template id="father">
        <div>
            <son :toson="toSon" @tofather="tofather($event,1)"></son>
        </div>
    </template>

Vue.component('father', {
            template: '#father',
            data() {
                return {
                    toSon: { name: 1 }
                }
            },
            methods: {
                tofather(data, params) {
                    console.log(data);
                    console.log(params);
                    console.log(event);
                }
            }
        })

这是子组件

<template id="son">
        <div>
            <button @click="toFather">toFather</button>
            {{msg}}
        </div>
    </template>

 Vue.component('son', {
            template: '#son',
            data() {
                return {
                    msg: ''
                }
            },
            props: {
            // 规定了父组件只能传对象类型
                toson: [String, Number, Object],
                toson: {
                // 可以设置多个类型，可以传Number也可以传String
                    type: [String, Number],
                    // 设置默认值的时候必须使用函数，原理和data必须使用函数是一样的
                    dafault() {
                        return {
                        }
                    }
                }
            },
            methods: {
                toFather() {
                    // 第一个参数：自定义事件名  第二个参数：要传递的参数
                    this.$emit('tofather', '去father', '去father2')
                    // this.$emit('tofather', { name: 'zs' })
                }
            },
            created() {
                // this.$emit('tofather', '去father')
                // this.toson = 'father'
                // console.log(this.toson);
                this.msg = this.toson
            }
        })