vue2.0中$refs怎么使用

Question

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

Answer 1

比如我拿ueditor来做了一个Editor的组件然后在另一个页面有个表单，里面把Editor引入进来了。当然，components里面注册时必须的！我在页面上点击提交，那么，就会用到编辑器的getContent()方法,那么问题来了，getContent这个方法所在的对象如何界定？或者一个页面上有几个组件，都有getContent这个方法，那怎么办？这里就给editor了一个ref属性，我理解成其实就是类似html里面的id。然后，组件或者实例中使用$refs，就是找出所有具有ref属性的组件！然后放在一个对象中。对象的键就是ref的属性值。<template>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <Editor ref="details"></Editor>&nbsp; &nbsp; &nbsp; &nbsp; <Table ref="mainTable"></Table>&nbsp; &nbsp; &nbsp; &nbsp; <Form ></Form>&nbsp; &nbsp; </div></template><script>export default (){&nbsp; &nbsp; data(){&nbsp; &nbsp; &nbsp; &nbsp; return {}&nbsp; &nbsp; },&nbsp; &nbsp; components:{Editor,Table,Form},&nbsp; &nbsp; methods:{&nbsp; &nbsp; getContent(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(this.$refs);//这里打印的就是一系列的带有ref属性的组件构成的对象&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.$refs.details.getContent();//这里就可以使用editor的getContent方法了&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}</script>