Vue-$refs使用

使用$refs,可以快速拿到子组件的data属性,

在子组件中用ref绑定一个唯一的名字,可用this.$refs.ZXC拿到该组件的data属性,不需要子组件传父组件。

ASD.vue   父组件

<template>
    <div>
        <el-button type="primary" icon="el-icon-edit" @click="getyy">呵呵</el-button
         <ZXC  ref="ZXC"></ZXC>
    </div>
</template>
import ZXC from "../components/ZXC.vue"
<script>
    export default {
        components: {
           ZXC
        },
        data(){
            retrun{
            
           }
        },
        methods:{
            getyy(){
                this.$refs.ZXC.num=0;
            }
        }

    }
</script>

ZXC.vue   子组件

<template>
    <div>
        <span>{
   
   {num}}</span>
    </div>
</template>
<script>
    export default {
        data(){
            retrun{
                num:0
           }
        },
        methods:{
        }
    }
</script>

猜你喜欢

转载自blog.csdn.net/weixin_44126032/article/details/121428394