组件传值:ref
程序员文章站
2022-04-30 14:46:35
...
方法:$parent / $children与 ref
ref
如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；
如果用在子组件上，引用就指向组件实例
$parent / $children：访问父 / 子实例
vue中的ref属性
使用vue开发时经常会用到ref属性，ref属性有什么作用呢？
我刚开始用的时候发现这个属性有点鸡肋，总是感觉可有可无，但是随着不断的使用vue，慢慢地发现它的作用还是挺重要的，
比如：有时候我们想在父组件中调用子组件的方法或属性，这个时候该怎么做呢？
可以通过为子组件设置ref，然后通过this.$refs.refName（refName为子组件的ref值）获取到子组件，然后就可以随意调用子组件的方法和属性了。
又比如：有时候我们想操作子组件或HTML标签的DOM，在vue中我们几乎不使用class或id来获取元素的DOM，这个时候该怎么做呢？
可以为子组件或想要操作的DOM标签添加ref属性，然后通过this.$refs.refName.$el或者this.$refs.refName来获取DOM。
那么在使用ref时要注意什么呢？
根据ref使用的对象不同，获取到的结果也是不一样的：
<1> 自定义组件使用ref属性，通过ref值可获取到该自定义组件；
<2> 普通HTML标签使用ref属性，通过ref值获取到的是该标签对应的DOM；
举个demo：
<!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>
</head>
<body>
<div id="app">
<hello ref="hello"></hello>
<div ref="div"></div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
const Hello = {
template: '<h1>Hello, {{name}}</h1>',
data(){
return {
name: 'Ryan',
}
},
}
const app = new Vue({
el: '#app',
components: {
Hello,
},
mounted() {
console.log(this.$refs, this.$refs.hello, this.$refs.div);
},
})
</script>
</body>
</html>
demo中，分别为自定义组件Hello和div标签设置ref属性，并在DOM挂载后将使用ref值获取的结果打印出来。如图：
上一篇： awk命令使用
下一篇： 怎样使用vue计算属性与方法侦听器