1. 概念介绍
https://cn.vuejs.org/v2/api/#ref 官方文档
简答说，给 “DOM元素 或 组件” ， 设置一个ref ， 我们就可以通过$refs 获取到 “DOM节点 或 组件内容”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> ref使用</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <h1>{{ message }}</h1> <button ref="myButton" @click="clickedButton">点击偶</button> <com-name></com-name> </div> </body> <script type="text/javascript"> // 自定义组件 let com = Vue.component('com-name',{ template: "<button ref='myzi' @click='show'>自定义组件</button>", methods:{ show(){ console.log(this.$refs); } } }) let app = new Vue({ el: '#app', data () { return { message: 'Hi!大漠' } }, methods: { clickedButton: function () { console.log(this.$refs) this.$refs.myButton.innerText = this.message } } }) </script> </html>
点击 页面上两个按钮 ， 控制台就会打印出对象 ， 之后我们就可以操作
