vue 基础入门笔记 15:ref
361 / 0 / 创建于 4年前 /
September 的个人博客
vue 基础入门笔记 15
- ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的
$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div id="app">
<!-- 操作普通的 DOM 元素 -->
<button type="button" @click='clickA' class="btn btn-danger">button</button>
<h1 ref="h1">hello world</h1>
<!-- 操作组件 -->
<com ref="com">
<h1>click</h1>
</com>
</div>
<template id="comA"></template>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
clickA() {
//操作普通的 DOM 元素
console.log(this.$refs.h1.innerText)
//console.log(this.$refs.comA.msg)
//操作组件的data
console.log(this.$refs.com.msg)
//操作组件的methods
this.$refs.com.show()
}
},
components: {
'com': {
template: '#com',
data() {
return {
msg: 'msg'
}
},
methods: {
show() {
console.log('show')
}
},
}
}
});
Vue.config.devtools = true
</script>
</body>
</html>本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号