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()，不懂没关系，可以翻典籍或查看对应的讲解博客。

以上就是关于 “ vue.js踩坑之ref引用细节点 ” 的全部内容。

vue.js踩坑之ref引用细节点相关推荐

vue.js踩坑之单向数据流
vue.js父子组件之间的数据通信,细节总结隐性规则:单行数据流学前疑问: 1.父组件如何向子组件通信数据? 2.父组件可以直接修改子组件的数据!但是反过来绝对不可以!那怎么解决这个问题呢? 3. ...
vue.js踩坑之组件参数检验与非props特性
vue组件参数检验与非props特性学前疑问: 什么是组件参数检验? 组件参数校验都有哪些属性设置?分别表示什么意思? 什么是props特性?何为非props特性?如何判断? 重要代码讲解如下: 父 ...
Vue中video.js踩坑日记单页切换后视频无法播放
使用video.js踩坑.单页切换后视频无法播放切换页面以后正常显示效果但是我切换路由返回上一层或者点击跳转下个页面的返回的时候就不显示了?? 解决思路在生命周期beforeDestroy函数中 ...
html2canvas图片的文字偏移,html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
Next.js踩坑入门系列（七） —— 其他相关知识
Next.js踩坑入门系列 (一) Hello Next.js (二) 添加Antd && CSS (三) 目录重构&&再谈路由 (四) Next.js中期填坑 (五) ...
layui中从上一个js模块中取参数_layui的引用js踩坑
前言: 今天因为项目需要,需要使用layui,因为本身不多的前端经验,以为layui的用法和其他的前端框架,例如jquery,bootstrap等等,只需要直接引入layui.js,和layui.cs ...
Vue（踩坑）vue.esm.js?efeb:628 [Vue warn]: Error in render: TypeError: Cannot read property '0' of unde
1,项目报错: 把数组定义下,把异步请求的数据赋给定义的变量数组
html2canvas在Vue项目踩坑-生成图片偏移不完整
背景最近做一个Vue项目需求是用户长按保存图片,页面的数据是根据不同id动态生成的,页面渲染完生成内容图片让用户长按保存的时候,把整个页面都保存起来. 在项目遇到的坑是图片能生成,可是生成的图片总是 ...
element table多选表格_【经验总结】vue + element-ui 踩坑—— table 篇
工作一年,主要职责是负责公司后台管理平台的开发与维护.此间面对各种业务需求,通过面向谷歌编程等常见方式,积累了一些微不足道的经验. 本篇为总结的第一篇(也许有其他篇)-- table 篇对于后台管理 ...

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

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

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

步骤如下：

注意：

vue.js踩坑之ref引用细节点相关推荐

最新文章

热门文章

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

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

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

步骤如下：

注意：

vue.js踩坑之ref引用细节点相关推荐

最新文章

热门文章

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