vue中 ref attr listeners的使用方法

vue在实际的工作当中，ref、attr、listeners 这三个属性是经常会使用到的。刚才开我也不太明白这三个属性的用法，后来在做项目的时候，我不得不去学习。

<template>
    <div>
        <button @click="fun">click</button>
        <child ref="child" @test="test" @getList="getList"></child> <!--注意这一块内容中的 ref="child"-->
    </div>
</template>

<script>
  import child from '@/views/child'
  export default {
    data(){
        return {
            name:'xiaobing',
            age:18,
            sex:2,
            id:null
        }
    },
    created(){
        this.getList();
    },
    methods:{
        getList(){
            console.log('getList');
        },
        fun(){
            this.$refs.child.cid = 50; //这儿直接对子组件里data的属性进行赋值。那么，子组件的值就会做出相应的改变
            this.$refs.child.dialogVisible = true;
        }
    },
    components:{
        child
    }
  }
</script>

<style>

</style>

<template>
    <div>
        <el-dialog
            @open="open"
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="活动名称">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>

                <el-form-item label="活动名称1">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
            </el-form>

            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="ok">确 定</el-button>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                dialogVisible:false,
                ruleForm:{
                    name:null,
                    title:null,
                },
                cid:null,
            }
        },
        created(){

        },
        methods:{
            ok(){
                this.dialogVisible = false
                this.$emit('getList',null) 
            },
            open(){
                let id = this.cid;
                console.log(id);
            },
            handleClose(){

            },
        },
    }
</script>

<style>

</style>

同样的，ref他不但可以对属性进行赋值(设置)和获取，而且它一样可以过通 this.$refs.child.方法名直接操作子组件里的方法。打个比方，子组件里有一个getGoods(params)这样的方法，如果我们要在父组件里直接执行它，那么我们可以这样子弄this.$refs.child.getGoods(参数)。

//------------------------------------分割线-------------------------------

attrs，它可以将父组件属性传递到子组件、孙组件…一直往下传递，只要子组件中添加了 v-bind=“$attrs”，它就能一层一层往下传递。当然 ，往下传递的前提就是子组件中的props 没有 父组件的属性。

//-----------------------分割线--------------------

listeners，它跟$attrs相类似，只是它是从子级向上传递的，而传递的是方法，并非属性。当然，不管是$attrs 还是$listeners,我们都需要在子组件中每一级都添加这么一段<Fourv-bind="$attrs" v-on=“$listeners”> //Four是组件的名字