Vue $refs使用
-
概述
$refs可用于获取html对象,或Vue实例对象
-
使用
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue父子件数据传递(自定义v-model方式)</title> </head> <body> <div id="app"> <cmp ref="cmp"></cmp> <input type="button" ref="btn" value="获取cmp组件中的name属性" @click="getCmpName"> <h2>cmp组件name:{{ cmp_name }}</h2> <button @click="btnValCahnge('名称被修改了...')">修改上个按钮的名称</button> </div> <template id="cmp"> <h2>这是cmp组件</h2> </template> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let app = new Vue({ components:{ cmp: { template: '#cmp', data(){ return { name: 'com中的name' } } } }, data:{ cmp_name: '' }, methods:{ getCmpName() { this.cmp_name = this.$refs.cmp.name }, btnValCahnge(val){ this.$refs.btn.value = val } } }).$mount('#app') </script> </body> </html>