子组件和父组件常用的方法

一、父组件拿取子组件的方法

<child ref="test"></child>

<template>

    <div ref="test1"></div>

    <script>

                export default {

                    data(){

                            test1:""

                    }

                }

    </script>

<template>

this.$refs.test.test1;//这样就可以拿到子组件的数据

二、子组件的点击事件,可以在父组件触发

<child @test="addEvenlisten(test1)"></child>

<script>

        export default {

                data:function(){

                    q:1,

                },

                methods:{

                            addEvenlisten:function(){
                                        q++
                            }

                }

        }

</script>


<template>

    <div @click="test()"></div>

    <script>

                export default {

                    data(){

                            test1:""

                    },

                    methods:{

                            test:function(){

                                 this.$emit('test',test1)

                            }

                    }

                }

    </script>

<template>


猜你喜欢

转载自blog.csdn.net/houdabiao/article/details/80361742