vue 里ref的使用
Posted tengyuxin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue 里ref的使用相关的知识，希望对你有一定的参考价值。
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>
点击 页面上两个按钮 ， 控制台就会打印出对象 ， 之后我们就可以操作
以上是关于vue 里ref的使用的主要内容，如果未能解决你的问题，请参考以下文章