vue.js踩坑之ref引用细节点讲解

目录
  • ref引用细节点讲解
    • 要点简介:[ 见下文案例 ]
    • 通过ref引用的形式,来操作DOM
    • 步骤如下
    • 重要代码如下
  • ref引用及插槽
    • ref引用
      • ref引用DOM元素
      • ref引用组件实例
      • 实现标签的按需切换
    • 插槽
      • 匿名插槽
      • 具名插槽
      • 作用域插槽

ref引用细节点讲解

vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点

要点简介:[ 见下文案例 ]

  • 使用is=" "解决H5出现的标签解析bug 。
  • 子组件中 使用data,data必须是 一个 函数!
  • DOM标签中,引用ref定义的name:获得的是该DOM元素;如下文的: this.$refs.hello.innerHtml
  • 组件中,引用ref:获得的是该DOM对象。如下文的: this.$refs.name2.number

vue不建议我们在代码里面操作DOM,但是,在处理一些极其复杂的动画效果,不操作DOM,单单靠vue的数据绑定是无法完成实际需求的效果的。这就需要我们必须操作DOM。如何操作呢?

通过ref引用的形式,来操作DOM

下面我们给一个需求:当点击div的时候,div里面的内容被打印出来。

步骤如下

1.首先起一个引用的名字,比如hello:

ref='hello'

通过引用名称拿到该ref对应DOM里面的内容。

重要代码如下

<body>
    <div id="app">
        <div 
            ref="hello"
            @click="handleClick"
        >
            hello , 通过ref命名引用 操作DOM元素 !
        </div>
    </div>
        <script>
        var app = new Vue({
          el: '#app',
          methods: {
              handleClick: function() {                          alert(this.$refs.hello.innerHTML);
              }
          }
        })
    </script>
</body>

注意:this.$refs指页面所有引用。

2.如果是引用组件呢?

我们先看一段代码:

<body>
    <div id="app">
        <counter></counter>
        <counter></counter>
    </div>
        
    <script>
        Vue.component('counter', {
            template: '<button @click="handleClick">{{number}}</button>',
            data: function() {
                return {
                    number: 0
                }
            },
            methods: {
                  handleClick: function() {                              
                      this.number ++;
                  }
            }
        })
        var app = new Vue({
          el: '#app',
        })
    </script>
</body>

下面我们再给一个需求:数字的求和运算。

全部代码如下:

<body>
    <div id="app">
        <counter ref="name2" @change="handleChange"></counter>
        <counter ref="name3" @change="handleChange"></counter>
        <div>{{total}}</div>
    </div>
        
    <script>
        //子组件
        Vue.component('counter', {
            template: '<button @click="handleClick">{{number}}</button>',
            data: function() {
                return {
                    number: 0
                }
            },
            methods: {
                  handleClick: function() {                              
                      this.number ++;
                      this.$emit('change')//父组件中监听变化
                  }
            }
        })
        
        //父组件
        var app = new Vue({
            el: '#app',
            data: {
                total: 0
            },
            methods: {
                handleChange: function() { 
                    console.log(this.$refs.name2.number);
                    console.log(this.$refs.name3.number);
                    this.total = this.$refs.name2.number + this.$refs.name3.number;
                }
            }
        })
    </script>
</body>

注意:

this.$refs.name2是个对象!

这里使用了父子通信$emit(),不懂没关系,可以翻典籍或查看对应的讲解博客。

ref引用及插槽

ref引用

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,引用指向的就是DOM元素;如果用在子组件上,引用就指向组件实例。(可用于访问子组件实例或子元素)

<p ref='p'>hello</p>
<child-component ref='child'></child-component>

当v-for用于元素或组件的时候,引用的信息将是包含DOM节点或组件实例的数组。

注意:因为ref本身是作为渲染结果被创建的,在初始渲染的时候你还不能访问它们,因为它们还不存在。

ref引用DOM元素

引用ref引用页面上的DOM元素:

点击按钮后效果如图:

ref引用组件实例

要使用 ref 引用页面上的组件实例:父组件访问子组件实例

RefCom1组件:

子组件RefCom2:

实现效果:

实现标签的按需切换

通过布尔值 inputVisible 来控制组件中的文本框与按钮的按需切换,希望文本框显示出来后立即获得焦点。

补充: this.$nextTick(cb)方法

组件的$nextTick(callback)方法,会把callback回调函数推迟到下一个DOM更新周期之后执行。通俗讲,就是等组件的DOM异步地重新渲染完成后,再执行callback回调函数,从而能保证callback回调函数可以操作到最新的DOM元素。

插槽

编译作用域:父组件模板的所有东西都会在父级作用域内编译,子组件模板的所有东西都会在子级作用域内编译。

插槽(slot):是vue为组件的封装者提供的能力。允许在封装组件时,把不确定的,希望由用户指定的部分定义为插槽。插槽将父组件的内容与子组件的模板相混合,从而弥补了视图的不足。

如果父组件没有插入内容,那么slot的内容就作为默认出现;若父组件插入了内容,则slot的内容将被插入的内容替换掉。

匿名插槽

在封装组件时,可以通过<slot>元素定义插槽,从而为用户与理由内容占位符。匿名插槽(默认插槽),有且只有一个。

例如:

子组件:

父组件:

补充:

(1)如果在封装组件时没有预留任何<slot>插槽,则用户提供的内容都会被丢弃。

(2)后备内容:如果没有为插槽提供内容,那么后备内容会生效。

具名插槽

如果在封装组件时需要预留多个插槽节点,则需要为每个 <slot> 插槽指定具体的 name 名称。这种带有具体名称的插槽叫做“具名插槽”。

例如:

SlotSon组件:

SlotFather组件:

作用域插槽

在封装组件的过程中,可以为预留的<slot>插槽绑定props数据,这种带有props数据的<slot>叫做“作用域插槽”。

例如:

SlotSon2组件:(通过插槽给父组件传递数据)

SlotFather组件:接收插槽传过来的数据,赋给插槽内容

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue.js 踩坑记之双向绑定

    这篇体验一下VUE的双向绑定 <html> <head> <meta charset="utf-8"> </head> <body> <script src="https://unpkg.com/vue/dist/vue.min.js"></script> <div id="app"> <input type="text" v

  • VUE 使用中踩过的坑

    前言 vue如今可谓是一匹黑马,github star数已居第一位!前端开发对于vue的使用已经越来越多,它的优点就不做介绍了,本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结,帮助大家踩坑.如果喜欢的话可以点波赞,或者关注一下,希望本文可以帮到大家! 1.路由变化页面数据不刷新问题 出现这种情况是因为依赖路由的params参数获取写在created生命周期里面,因为相同路由二次甚至多次加载的关系 没有达到监听,退出页面再进入另一个文章页面并不会运行created组件生命周

  • vue.js中ref和$refs的使用及示例讲解

    关于ref和$refs的用法及讲解,vue.js中文社区( https://cn.vuejs.org/v2/api/#ref )是这么讲解的: ref 被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的 $refs 对象上. 如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素:如果用在子组件上,引用就指向组件: vue.js中文社区文档上的说明已经就比较通俗易懂了,其实我们可以这么理解,ref和$refs其实就是用来获取/操作DOM元素的:类似于jquey中的$(".xxx

  • 浅谈Vue.js中ref ($refs)用法举例总结

    本文介绍了Vue.js中ref ($refs)用法举例总结,分享给大家,具体如下: 看Vue.js文档中的ref部分,自己总结了下ref的使用方法以便后面查阅. 一.ref使用在外面的组件上 HTML 部分 <div id="ref-outside-component" v-on:click="consoleRef"> <component-father ref="outsideComponentRef"> </co

  • vue.js踩坑之ref引用细节点讲解

    目录 ref引用细节点讲解 要点简介:[ 见下文案例 ] 通过ref引用的形式,来操作DOM 步骤如下 重要代码如下 ref引用及插槽 ref引用 ref引用DOM元素 ref引用组件实例 实现标签的按需切换 插槽 匿名插槽 具名插槽 作用域插槽 ref引用细节点讲解 vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点 要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标签解析bug . 子组件中 使用data

  • 浅谈vue的踩坑路

    ------>axios模拟get json一直拿不到文件,先把data放到根目录,再去dev-server.js(就是npm执行的那个文件)里面设置静态资源访问路径app.use('/data',express.static('./data')) ... app.use(hotMiddleware) // serve pure static assets var staticPath = path.posix.join(config.dev.assetsPublicPath, config.d

  • Nuxt.js踩坑总结分享

    构建问题 1. 如何在 head 里面引入js文件? 背景: 在<head>标签中,以inline的形式引入flexible.js文件.本项目主要为移动端项目,引入flexible.js 实现移动端适配问题. Nuxt.js 通过 vue-meta 实现头部标签管理,通过查看文档发现,可以按照如下方式配置: // nuxt.config.js head: { script: [ { innerHTML: 'console.log("hello")', type: 'text

  • Vue.js组件间的循环引用方法示例

    什么是组件: 众所周知组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HTML元素的形式,以is特性扩展.下面话不多说了,来一起看看本文的正文内容. 引言 写了大大小小不少基于vue的项目,但是基本没用到过组件循环引用的知识. 为了查缺补漏,照着官方文档撸一个DEMO:组件之间的循环引用 本人的运行版本为 vue-cli@2.8.1,启用项目后,将以下 js 文件

  • vue实力踩坑 当前页push当前页无效的解决

    目录 vue当前页push当前页无效 vue push报错 TypeError: Cannot read property ‘push‘ of undefined 解决方法 vue当前页push当前页无效 当在当前页面中push页面跳转当前页,只是push的参数不同时,只能用字符串拼接,parames和query都不会起作用.不知道为什么... 比如说:当前页的url是 /invest/myinvest?page=1&day=0-30` 但是想点击的时候改变参数,所以就 this.$router

  • Vue.js中组件中的slot实例详解

    Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活

  • vue 系列——vue2-webpack2框架搭建踩坑之路

    react.vue.angular代表了3种前端工程化的思想,学习三大框架主要是理解它们的核心概念,比如组件.生命周期.单向数据流.双向绑定等.这些概念在非框架开发中,很少人会去这样系统化的思考,对于新手来说,很多概念都没有接触过,不知道从何入手一个react.vue或者是angular项目,下面我将会从零搭建vue项目,边做项目边学习vue的思想. 1.想要使用vue,我首先该怎么做? 想要学习vue,我第一件事是去vue官网看简介:https://cn.vuejs.org/v2/guide.

  • 详解Vue微信公众号开发踩坑全记录

    本文介绍了Vue微信公众号开发踩坑全记录,分享给大家,也给自己留个笔记. 需求 微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能 现状及难点 采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中涉及签名和token校验依赖服务端 JS-SDK需要向服务端获取签名,且获取签名中需要的参数包括所在页面的url,但由于单页应用的路由特殊,其中涉及到IOS和android微信客户端浏览器内核的差异性导致的兼容问题 解决方案

随机推荐