ref

简介：ref是refence的缩写，就是引用的意思，所以它的功能就是一种连接，各个模块的作用，这么说比较抽象，直接看代码。

学习代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>ref</title><script src="../js/vue.js"></script>
</head>
<body><div id="app"><button @click="getInfo()">获取内容 </button><h3 ref="para"> 这是一段话。<span> 随便写的。</span> </h3></div>
</body>
<script>const app = new Vue({el:"#app",methods:{getInfo(){// 通过ref将getInfo方法与h3标签连接console.log(this.$refs.para.innerHTML); // 获取的是HTML文本console.log(this.$refs.para.innerText); // 获取的是文本中的内容}}});</script>
</html>

运行结果：

Vue的基本组件4(ref)相关推荐

Vue 非父子组件通信（ref）
Vue 非父子组件通信 (ref) 流程:1. 先在son子组件中定义一个数据和事件处理程序data( ) { return { flag: false }} , methods: { cry( ) ...
vue 父组件调用子组件方法ref
一.ref被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的$refs对象上 vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.metho ...
深刻理解Vue中的组件
今天看了下Vue官网上关于组件的教程,感觉内容还挺多,现在把组件中基本的知识梳理一下. 组件的基本使用注册组件注册组件就是利用Vue.component()方法,先传入一个自定义组件的名字,然后传 ...
Vue.Draggable 实现组件拖拽
Vue.Draggable 实现组件拖拽特性支持触摸设备支持拖拽和选择文本支持智能滚动支持不同列表之间的拖拽不以jQuery为基础和视图模型同步刷新和vue2的国度动画兼容支持撤销操 ...
组件通信 $ref
(1)放在dom上表示获取当前dom元素, (2)放到组件上表示获取当前组件实例 (3)在v-for中获取的是集合 <!DOCTYPE html> <html lang=" ...
com组件的ref有时需要有时不需要?_Vue3组件通信总结
前言我们知道vue3的Composition Api是它几个最大亮点之一,所以下文都是在setup中演示代码的实现.后面会以开发几个简单form组件为例子来演示. 基本操作这里先简单开发一个VIn ...
Vue学习（组件传参）-学习笔记
文章目录 Vue学习(组件传参)-学习笔记父到子子到父父操作子-ref(类似于操作dom) 兄弟之间传参 Vue学习(组件传参)-学习笔记父到子 Father:(index) <temp ...
data怎么给echart传值_通用技术 VUE 子父组件传值
为啥这点东西需要一周时间: 1.首先是水平一般,能力有限,前后端都是半吊子,再加上最近有点松劲了: 2.由于前期规划问题,在做质量统计的时候,需要做大量的数据整理.统计工作. 3.将前端的Echart ...
vue.js踩坑之ref引用细节点
vue.js组件之H5页面,DOM标签或者组件中,通过ref="自定义name名称"引用的细节点要点简介:[ 见下文案例 ] 使用is=" "解决H5出现的标 ...

Vue的基本组件4(ref)

ref

Vue的基本组件4(ref)相关推荐

最新文章

热门文章