javascript - Comment utiliser $refs dans Vue2.0

Question

Comment utiliser $refs dans vue2.0 Merci de me donner un petit exemple, merci !

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

Par exemple, j'ai utilisé ueditor pour créer un composant Editor
Ensuite, il y a un formulaire sur une autre page, qui présente l'Editor. Bien sûr, il faut s'inscrire en composants !
Je clique sur soumettre sur la page, puis la méthode getContent() de l'éditeur sera utilisée. La question est donc, comment définir l'objet où se trouve la méthode getContent ? Ou bien il y a plusieurs composants sur une page, qui ont tous la méthode getContent. Que dois-je faire ?
L'éditeur reçoit ici un attribut ref, qui, je crois, est similaire à l'identifiant en HTML.
Ensuite, utiliser $refs dans des composants ou des instances revient à trouver tous les composants avec des attributs ref ! Mettez-le ensuite dans un objet.
La clé de l'objet est la valeur d'attribut de la réf.

<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>