【Vue】父子组件传参

文章目录

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


前言

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

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


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

1. e m i t 方法第二个参数可以定义子组件给父组件传递的内容 2. 在父组件中获取到子组件中的内容( 1 )父组件没有自定参数,在父组件的方法直接加这个参数就可以拿到( 2 )父组件有自定义参数,传入 emit方法第二个参数可以定义子组件给父组件传递的内容 2. 在父组件中获取到子组件中的内容 (1)父组件没有自定参数,在父组件的方法直接加这个参数就可以拿到 (2)父组件有自定义参数,传入 emit方法第二个参数可以定义子组件给父组件传递的内容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>

你可能感兴趣的:(vue.js,javascript,前端)