关于vue中ref的使用方法

之前在项目中会通过ref在父子组件传递一些数据,但是具体ref的其他用法并没有深究,所以来了解一下ref的具体使用方法

first:

    <div ref="hello">
<!--      绑定了data里面的值并渲染到页面-->
      <h1 v-model="msg">{{msg}}</h1>
    </div>//在方法或者生命周期的函数中获取数据
console.log(this.$refs.hello.innerText);

second:

components:{node}//注册子组件
<node ref="node">111222</node>
//在表单中使用子组件并在子组件上使用ref
console.log(this.$refs.node);
//在方法中通过refs获取子组件的方法和属性

这是获取整个子组件的内容

原文地址:https://www.cnblogs.com/purple-windbells/p/11732171.html

时间: 2024-08-30 16:15:20

关于vue中ref的使用方法的相关文章

React中ref的使用方法

React中ref的使用方法 在react典型的数据流中,props传递是父子组件交互的唯一方式:通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信.当然,就像react官网所描述的一样,在react典型的数据量之外,某些情况下(例如和第三方的dom库整合,或者某个dom元素focus等)为了修改子组件我们可能需要另一种方式,这就是ref方式. 1.ref有两种使用方法: 1)回调函数 标签中:<input type="text" classNam

vue中计算属性,方法,侦听器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue中计算属性,方法,侦听器</title> <script src="./vue.js"></script> </head> <body> <div id="app&qu

vue中ref在input中详解

当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.v-model <template> <input type="text" v-model="inputval"> </template> export default { data(){ return { inputval:'', } }, watch:{ inputval(){ console.log(this.inputval) } } } 2.ref自定义一个方

vue中 localStorage的使用方法(详解)

vue中实现本地储存的方法:localStorage,在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k),localStorage中一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同. (1).储存数据 localStorage.setItem('accessToken', 'Bearer ' + response.data.res

vue中引入awesomeswiper的方法以及编写轮播组件

1.先安装less-loader npm install less less-loader --save 2.再安装css-loader npm install css-loader --save 3.安装上面两个之后.再安装vue-awesome-swiper(必须在前两个安装过之后安装) npm install vue-awesome-swiper --save 4.安装完之后在package.json文件中查看一下,看是否安装上,如果安装成功,里面会显示对应的版本号 "less"

解决vue中无法取得methods方法中的return值

如果在vue的methods中去return出来一个值, 然后发现调用这个方法的时候, 并不能获取到, 得到的是undefined... 解决方法是使用callback回调函数. 举个栗子:   这个样子获取到的结果是undefined 正确写法: 原文地址:https://www.cnblogs.com/betty-niu/p/12027585.html

vue 中ref 的使用注意事项

最近看别人的项目发现有些语法不能理解,所以百度进行了学习.现在总结一下. ref 有两种用法 1.ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 2.ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法. 3.如何利用v-for 和ref 获取一组数组或者dom 节点

vue中计算属性vs方法的区别

一 什么是计算属性? 计算属性(computed),也是一个属性,也是用来存储数据用的,但是和data属性相比还是有区别 1 数据是可以进行逻辑处理相关的操作 2 可以对计算属性中的数据进行监视 例如: 调用的方式都是一样的 二 计算属性和方法的区别? 1 计算属性是基于它所依赖的数据进行更新,在有在相关依赖的数据发生变化了才会进行更新,而普通的方法每次都会执行 2 计算属性是有缓存的,只要它所依赖的数据没有发生改变,后面的每一次访问计算属性中的值,都是之前缓存的结果,不会重复执行. 例如: h

swiper在vue中正确的使用方法

1.安装swiper,执行npm install vue-awesome-swiper --save命令 2.在main.js中添加下面三行 import 'swiper/dist/css/swiper.css' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) 3.在html部分添加 <swiper :options="swiperOption"> <swiper-