1. 在DOM标签中增加ref属性,可以用来调用该标签的内容
2. 将ref加入到组件标签属性中,可以用来获取整个组件实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>ref属性</title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="root"> <h2 v-text="msg" ref="title">这是root组件</h2> <button ref="'btn" @click="showDom">点击后输出三行DOM中的所有的ref</button> <School ref="sch"></School> </div> <script type="text/javascript"> // 创建组件test const School = Vue.extend({ template: '<h2>this is test</h2>' }) // vue组件 new Vue({ el: '#root', data() { return { msg: '欢迎欢迎热烈欢迎' } }, components:{ School }, methods: { showDom(){ console.log(this.$refs); } }, }) </script> </body> </html>