【Vue】父子组件传参

最新推荐文章于 2024-08-18 13:53:12 发布

山有扶苏..

最新推荐文章于 2024-08-18 13:53:12 发布

阅读量487

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/luobifeiyeshi0/article/details/130690857

版权

文章目录

前言
- 1.子组件调用父组件的方法
- 2.子组件给父组件传递数据
代码

前言

1.子组件调用父组件的方法

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

2.子组件给父组件传递数据

1. $e mi t 方法第二个参数可以定义子组件给父组件传递的内容 2. 在父组件中获取到子组件中的内容（ 1 ）父组件没有自定参数，在父组件的方法直接加这个参数就可以拿到（ 2 ）父组件有自定义参数，传入$ event也可以拿到子组件传递的数据。通过$event只能传递第一个参数。

代码

子组件向父组件传参过程中有两个参数：第一个参数是自定义的名字；第二个参数是传递的数据。

<body>
    <div id='app'>
        <father></father>
    </div>
    <template id="father">
        <div>
            <child :type="type1" @toparent="toparent(1,$event)"></child>
        </div>
    </template>
    <template id="child">
        <div>
            child
            <button @click="toP">点击</button>
        </div>
    </template>
    <script>
        Vue.component('father', {
            template: '#father',
            data() {
                return {
                    type1: 'free'
                }
            },
            methods: {
                // 接收来自子组件的传值
                toparent(data, data2) {
                    console.log(data);  // 1
                    console.log(data2);  // {name: 'zs', age: 18}
                }
            }
        })
        Vue.component('child', {
            template: '#child',
            data() {
                return {

                }
            },
            // 父传子
            props: {
                type: {
                    type: [String, Number],
                    default: () => {
                        return 'free'
                    }
                }
            },
            methods: {
                // 子传父
                toP() {
                    // 第一个参数：自定义的名字
                    //第二个参数：传递的数据
                    this.$emit('toparent', { name: 'zs', age: 18 })
                }
            },
            created() {
                console.log(this.type);  // free
            }
        })
        const vm = new Vue({
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>