javascript – So verwenden Sie $refs in vue2.0

Question

Wie verwende ich $refs in vue2.0? Bitte geben Sie ein kleines Beispiel, danke!

Answer 1

<p id="parent">
  <user-profile ref="profile"></user-profile>
</p>

var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

Answer 2

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

<template>
    <p>
        <Editor ref="details"></Editor>
        <Table ref="mainTable"></Table>
        <Form ></Form>
    </p>
</template>
<script>
export default (){
    data(){
        return {}
    },
    components:{Editor,Table,Form},
    methods:{
    getContent(){
            console.log(this.$refs);//这里打印的就是一系列的带有ref属性的组件构成的对象
            this.$refs.details.getContent();//这里就可以使用editor的getContent方法了
        }
    }
}
</script>