Vue的小练习，关于ref引用

最新推荐文章于 2022-07-11 23:12:09 发布

发光吖

最新推荐文章于 2022-07-11 23:12:09 发布

阅读量240

点赞数

分类专栏： vue 文章标签： vue js javascript java

本文链接：https://blog.csdn.net/qq_43598138/article/details/105921542

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Vue的小练习，关于ref引用

前言

我们通过一个小练习，来说明引用ref中的知识点。
这是完成后的效果图，点击响应颜色的按钮，下方的正方形区域就会变为相应的颜色。
在这里插入图片描述

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        .square-box{
            width:100px;
            height: 100px;
            border: 2px solid #ccc;
            margin-top: 20px;

        }
    </style>
</head>
<body>
    <div id="app">
        <square-change ref="cmp"></square-change>
        <button @click="handleClick">click</button>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data: {

            },
            methods:{
                handleClick(){
                    console.log(this.$refs);
                }
            },
            components: {
                squareChange: {
                    data(){
                        return {
                            colorArr:['red','orange','yellow','green']
                        }
                    },
                    template: `
                    <div>
                        <button
                            ref="btn"
                            v-for="color in colorArr"
                            :key="color"
                            :style="{ backgroundColor:color }"
                            @click="handleClick(color)"
                            :data-Color="color"
                        >{{ color }}</button>
                        <div class="square-box" ref="squareBox"></div>
                    </div>
                    `,
                    methods: {
                        handleClick(color){
                            //const color = e.target.dataset.color;
                            // console.log(this.$refs)
                            const squareBox = this.$refs.squareBox;
                            squareBox.style.backgroundColor = color;
                            console.log(this.$refs)
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

所需注意的点：

响应事件中color的值，可以是传参过来，也可以是通过dom元素的属性获得，或者我们把color作为一个属性放在一个data-color里。

【注意】：html中的元素属性如果被定义为data-xxx，那么这些属性最终都会被放置在dataset中。

例如绑定了data-color，那它的值就放在dataset.color里。

html元素的属性，不管是大写的还是小写的，最终渲染到页面上的都是小写的。

也就是我们写成data-Color和data-color是等效的。

事件监听函数中通过e.target获取的，实质上就是dom对象，而在js中，我们必须清楚，获取dom和操作dom都是非常浪费性能的。

所以我们还是采用传参的方式获取color。

在原生js当中我们可以采用doucument.getElementByXXX等等方式获取dom元素。

在Vue当中，我们可以给一个dom元素添加一个引用，实际上就是给一个元素添加一个属性 ref ，该属性的值就是我们起的引用名称。

例如：

<div class="square-box" ref="squareBox"></div>

this.$refs代表当前实例中包含的所有元素引用。

如果给两个div，添加两个相同的ref，那么通过 this.$refs 最终找寻的是最后设置ref的那个div。即后来者覆盖原则。

那么，如果在v-for中，给每一个按钮都添加相同的ref，会如何呢？

在这里插入图片描述
在控制台打印当前所有引用：

console.log(this.$refs)

在这里插入图片描述
我们可以看到，那个btn所引用的，不是最后一个按钮，而是把所有按钮放在一个数组里，然后用一个引用"btn"去指向它。 ------这就是我们在使用Vue中的v-for所要注意的点。

可以给dom元素添加引用，同样的，我们也可以给组件添加引用。

     <square-change ref="cmp"></square-change>
     <button @click="handleClick">click</button>

  methods:{
      handleClick(){
          console.log(this.$refs);
      }
  },

在这里插入图片描述
组件的引用其实就是组件的实例对象（VueComponent），它就如同Vue的实例（vm）对象一样，可以用它拿到组件中所有的属性数据和它的方法。

总结：

ref：

设置ref的 —>dom对象的引用是该对象，组件的引用时组件的实例对象
ref同名时，后添加的会覆盖前面的，引用指向的是最后一个元素。
在v-for的时候添加引用，引用的值类型是数组，数组里面是一个一个的dom对象/组件实例对象。

发光吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue的小练习，关于ref引用

Vue的小练习，关于ref引用前言示例代码：所需注意的点：总结：前言我们通过一个小练习，来说明引用ref中的知识点。这是完成后的效果图，点击响应颜色的按钮，下方的正方形区域就会变为相应的颜色。示例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> ...
复制链接

扫一扫

专栏目录