vue2里面ref的具体使用方法

2024-06-13 09:51:07

本文介绍了vue2里面ref的具体使用方法，分享给大家，具体如下。

1、我们先定义两个组件

html部分

  <div id="app">
   <navbar ></navbar>
   <pagefooter ></pagefooter>
  </div>

js部分

  Vue.component('navbar',{
    template:'<div>{{navs}}</div>',
    data:function () {
     return {
      navs:1
     }
    }
   });
  Vue.component('pagefooter',{
    template:'<div>{{footer}}</div>',
    data:function () {
     return {
      footer:11
     }
    }
   });

这里怎么直接访问navbar的navs和pagefooter的footer值呢？这就用到ref了

2、ref的使用

修改组件

  <div id="app">
   <navbar ref="navbar"></navbar>
   <pagefooter ref="pagefooter"></pagefooter>
  </div>
   new Vue({
    el:'#app',
    created:function(){

    },
    mounted:function () {
     this.$refs.navbar.navs=222
     //ready,
     //这里怎么直接访问navbar的navs和pagefooter的footer值呢，
      console.log(this.$refs.navbar.navs);
      console.log(this.$refs.pagefooter.footer);
    }
   })

如果仅仅用到一个普通标签上

<div ref="demo"></div>

他的作用和：

document.querySelector('[ref=demo]');

的作用一样

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

vue组件 $children,$refs，$parent的使用详解

本文介绍了vue组件 $children,$refs,$parent的使用,分享给大家,也自己留个笔记如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"></firstchild> 然后在父组件中,通过this.$refs.one就可以访问了这个自组件了,包括访问自组件的data里面的数据,调用它的函数 2)$children 他返回的是一个
Vue中的ref作用详解(实现DOM的联动操作)

其实官网已经讲的很仔细了,只是我个人可能接受能力比较差,并没有立刻明白他的意思.不过使用之后就很明白了.这里主要举个例子来说明: 我想要的效果是点击保存的同时,也能点击重置这个按钮,触发reset,ref这个特性就帮我达到了DOM的一个联动效果. 总结
深入理解vue $refs的基本用法

我最近在研究vue 的路上,看到了vue $refs的用法,那么今天也算个学习笔记吧! <div id="app"> <input type="text" ref="input1"/> <button @click="add">添加</button> </div> <script> new Vue({ el: "#app", metho
解决vue里碰到 $refs 的问题的方法

本篇文章介绍了vue里碰到 $refs 的问题,分享给大家,希望能帮助大家解决问题记录困惑自己一个简单的问题...(瞬间感觉官方文档的强大) 在自己做的一个项目中,遇到一个列表页,根据id能进入详情页(动态匹配路由),详情页是单独的一个组件,在这个详情的组件里,我想获取内容给你区域的高度,以此来判断对底部按钮显示的位置,但是在ref的时候,就是获取不到该标签,在mounted钩子函数里打印 this.$refs,也能看到这个值,但就就是点不出来(this.$refs这个对象里这个值,但是就是获
Vue 2中ref属性的使用方法及注意事项

发现问题最近写东西遇到了莫名其妙的问题,用ref属性原以为它会获得一个数组 // html <ul> <li ref="refCon">1</li> <li ref="refCon">2</li> </ul> // js created: function() { this.$nextTick(() => { console.log(this.$refs.refCon) // 打印结果:
vue2里面ref的具体使用方法

本文介绍了vue2里面ref的具体使用方法,分享给大家,具体如下. 1.我们先定义两个组件 html部分 <div id="app"> <navbar ></navbar> <pagefooter ></pagefooter> </div> js部分 Vue.component('navbar',{ template:'<div>{{navs}}</div>', data:function
Vue2.0 实现单选互斥的方法

本文介绍了Vue2.0 实现单选互斥的方法,分享给大家,具体如下: 需要实现如上图的功能 1. 首次加载页面,根据data里的catgoryId高亮对应的选项 2. 点击某个选项,该选项高亮,其他去掉高亮代码结构: <template> <dd @click="changeCategory(currCourseFirst.categoryId)" v-for="currCourseFirst in currCourse.currCourseFirst&qu
vue2.0获取鼠标位置的方法

如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> <style> #canvas{ width: 500px; height:
VUE2.0中Jsonp的使用方法

本文主要介绍的是在VUE2.0Jsonp的使用方法,通过github引入jsonp和promise封装,实现跨域获取数据. 1.JSONP的用途和原理使用JSONP主要是目的通过动态创建Script,动态拼接url,进而抓取数据,实现跨域.确切地说,AJAX请求由于同源影响,是不允许进行跨域请求的,而Script标签src属性中的链接却可以访问跨域的js脚本,利用这一特性,服务端不再返回JSON格式的数据,而是返回一段调用某个函数的JS代码,在src属性中进行调用,实现跨域. 2.JSONP的
Vue2.0 UI框架ElementUI使用方法详解

今天来介绍一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也应运而生,这个框架是饿了么团队开发的一款适用于PC的一个UI框架,体验之后给我的个人感觉确实是有助于快速开发的一款UI框架,在饿了么GitHub中我下载了一个团队开发的官方Demo(GitHub链接为:https://github.com/taylorchen709/vue-admin)感觉可以应对初期团队项目为管理系统的开发这一类的网站,下面我就来仔细讲解下如何让官方的Demo运行起来首先我们使用windows件+
webpack+vue2构建vue项目骨架的方法

前端项目打包工具webpack与前端开发框架vue,算是现在前后端分离后非常流行的技术了,今天主要讲的是使用webpack和vue2构建一个前后端分离项目的基本骨架.虽然使用vue-cli脚手架可以帮我们搭建好一个项目骨架,但是了解原理我觉得还是很重要的,所以这篇文章主要就写webpack与vue构建一个基础项目.前提是已经安装了nodejs. 整个项目需要通过npm安装的依赖 css : style-loader.css-loader.sass-loader.node-sass js:babe
vue2路由方式--嵌套路由实现方法分析

本文实例讲述了vue2嵌套路由实现方法.分享给大家供大家参考,具体如下: 前面讲过了vue2路由基本用法,一般应用中的路由方式不会像上述例子那么简单,往往会出现二级导航这种情况.这时就需要使用嵌套路由这种写法. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ page contentType="text/html;charset=UTF-8"
vue2/vue3路由权限管理的方法实例

1. Vue 路由权限控制一般有2种方法 a.路由元信息(meta) b.动态加载菜单和路由(addRoutes) 2 路由元信息(meta)来进行路由权限控制 2.1 在vue2种的实现如果一个网站有不同的角色,比如管理员和普通用户 ,要求不同的角色能访问的页面是不一样的这个时候我们就可以把所有的页面都放在路由表里 ,只要在访问的时候判断一下角色权限 .如果有权限就让访问,没有权限的话就拒绝访问,跳转到404页面 vue-router 在构建路由时提供了元信息 meta 配置接口
vue2.x中$attrs的使用方法教程

最近笔者在做大屏项目的时候,由于组件数据传递,一层传递一层,使用vuex或者pinia又显得过于笨重.故而想起了那个传说中的v-bind="$attrs"以及v-on="$listeners",下面就来聊下使用: 上图组件之间的关系如下: ComponentGrandParent为最外层父级组件(爷) ComponentParent为中间层父级组件(父) ComponentChild为子组件 ComponentGrandParent组件想把props传递给Compo

vue2里面ref的具体使用方法

相关推荐

随机推荐