## **VUE3** ``` <!-- 綁定到一個元素上 --> <h2 ref="title">哈哈哈</h2> <!-- 綁定到一個組件實例上 --> <nav-bar ref="navBar"></nav-bar> setup(){ const navBar= ref() const title= ref() navBar.value.insertData() //insertData()方法是 nav-bar組件的方法 } ``` ## **VUE2** ``` <template> <div> <!-- 綁定到一個元素上 --> <h2 ref="title">哈哈哈</h2> <!-- 綁定到一個組件實例上 --> <nav-bar ref="navBar"></nav-bar> <button @click="btnClick">獲取元素</button> </div> </template> <script> import NavBar from './NavBar.vue'; export default { components: { NavBar }, data() { return { names: ["abc", "cba"] } }, methods: { btnClick() { console.log(this.$refs.title); console.log(this.$refs.navBar.message); this.$refs.navBar.sayHello(); // $el console.log(this.$refs.navBar.$el); } } } </script> <style scoped> </style> ```