vue2.0中$refs怎么使用

Question

vue2.0中$refs怎么使用?求一个小例子，谢谢！

Answer 1

比如我拿ueditor来做了一个Editor的组件
然后在另一个页面有个表单，里面把Editor引入进来了。当然，components里面注册时必须的！
我在页面上点击提交，那么，就会用到编辑器的getContent()方法,那么问题来了，getContent这个方法所在的对象如何界定？或者一个页面上有几个组件，都有getContent这个方法，那怎么办？
这里就给editor了一个ref属性，我理解成其实就是类似html里面的id。
然后，组件或者实例中使用$refs，就是找出所有具有ref属性的组件！然后放在一个对象中。
对象的键就是ref的属性值。

<template>

    <div>

        <Editor ref="details"></Editor>

        <Table ref="mainTable"></Table>

        <Form ></Form>

    </div>

</template>

<script>

export default (){

    data(){

        return {}

    },

    components:{Editor,Table,Form},

    methods:{

    getContent(){

            console.log(this.$refs);//这里打印的就是一系列的带有ref属性的组件构成的对象

            this.$refs.details.getContent();//这里就可以使用editor的getContent方法了

        }

    }

}

</script>