欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

组件传值: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值获取的结果打印出来。如图:
组件传值:ref

相关标签: 组件传值 ref