javascript - vue2.0中$refs怎麼使用

Question

vue2.0中$refs怎麼使用?求一個小例子，謝謝！

Answer 1

雷雷 雷雷

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>