javascript - Cara menggunakan $refs dalam vue2.0

Question

Bagaimana untuk menggunakan $refs dalam vue2.0? Sila berikan saya contoh kecil, terima kasih!

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

Sebagai contoh, saya menggunakan ueditor untuk membuat komponen Editor
Kemudian terdapat borang pada halaman lain, yang memperkenalkan Editor. Sudah tentu, perlu mendaftar dalam komponen!
Saya klik hantar pada halaman, kemudian kaedah getContent() editor akan digunakan, jadi persoalannya, bagaimana untuk menentukan objek di mana kaedah getContent berada? Atau terdapat beberapa komponen pada halaman, semuanya mempunyai kaedah getContent Apakah yang perlu saya lakukan?
Editor diberikan atribut ref di sini, yang saya faham serupa dengan id dalam HTML.
Kemudian, menggunakan $refs dalam komponen atau kejadian adalah untuk mencari semua komponen dengan atribut ref! Kemudian masukkan ke dalam objek.
Kunci objek ialah nilai atribut 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>