vue.js踩坑之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>
 	     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%09%20%20%20%20%20var%20app%20%3D%20new%20Vue(%7B%0A%20%09%20%20%20%20%20el%3A%20'%23app'%2C%0A%20%09%20%20%20%20%20methods%3A%20%7B%0A%20%09%20%20%20%20%20handleClick%3A%20function()%20%7B%20alert(this.%24refs.hello.innerHTML)%3B%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D)%0A%20%09%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 	</body>

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

2.如果是引用组件呢?

我们先看一段代码:


 	<body>
 	     <div id="app">
 	     <counter></counter>
 	     <counter></counter>
 	     </div>
 	
 	     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%09%20%20%20%20%20Vue.component('counter'%2C%20%7B%0A%20%09%20%20%20%20%20template%3A%20'%3Cbutton%20%40click%3D%22handleClick%22%3E%7B%7Bnumber%7D%7D%3C%2Fbutton%3E'%2C%0A%20%09%20%20%20%20%20data%3A%20function()%20%7B%0A%20%09%20%20%20%20%20return%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20number%3A%200%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%2C%0A%20%09%20%20%20%20%20methods%3A%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20handleClick%3A%20function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20this.number%20%2B%2B%3B%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D)%0A%20%09%20%20%20%20%20var%20app%20%3D%20new%20Vue(%7B%0A%20%09%20%20%20%20%20el%3A%20'%23app'%2C%0A%20%09%20%20%20%20%20%7D)%0A%20%09%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 	</body>

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

全部代码如下:


 	<body>
 	     <div id="app">
 	     <counter ref="name2" @change="handleChange"></counter>
 	     <counter ref="name3" @change="handleChange"></counter>
 	     <div>{{total}}</div>
 	     </div>
 	
 	     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%09%20%20%20%20%20%2F%2F%E5%AD%90%E7%BB%84%E4%BB%B6%0A%20%09%20%20%20%20%20Vue.component('counter'%2C%20%7B%0A%20%09%20%20%20%20%20template%3A%20'%3Cbutton%20%40click%3D%22handleClick%22%3E%7B%7Bnumber%7D%7D%3C%2Fbutton%3E'%2C%0A%20%09%20%20%20%20%20data%3A%20function()%20%7B%0A%20%09%20%20%20%20%20return%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20number%3A%200%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%2C%0A%20%09%20%20%20%20%20methods%3A%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20handleClick%3A%20function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20this.number%20%2B%2B%3B%0A%20%09%20%20%20%20%20%20%20%20%20this.%24emit('change')%2F%2F%E7%88%B6%E7%BB%84%E4%BB%B6%E4%B8%AD%E7%9B%91%E5%90%AC%E5%8F%98%E5%8C%96%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D)%0A%20%09%0A%20%09%20%20%20%20%20%2F%2F%E7%88%B6%E7%BB%84%E4%BB%B6%0A%20%09%20%20%20%20%20var%20app%20%3D%20new%20Vue(%7B%0A%20%09%20%20%20%20%20el%3A%20'%23app'%2C%0A%20%09%20%20%20%20%20data%3A%20%7B%0A%20%09%20%20%20%20%20total%3A%200%0A%20%09%20%20%20%20%20%7D%2C%0A%20%09%20%20%20%20%20methods%3A%20%7B%0A%20%09%20%20%20%20%20handleChange%3A%20function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20console.log(this.%24refs.name2.number)%3B%0A%20%09%20%20%20%20%20%20%20%20%20console.log(this.%24refs.name3.number)%3B%0A%20%09%20%20%20%20%20%20%20%20%20this.total%20%3D%20this.%24refs.name2.number%20%2B%E3%80%80this.%24refs.name3.number%3B%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D)%0A%20%09%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 	</body>

注意:

this.$refs.name2是个对象!

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

ref引用及插槽

ref引用

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


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

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

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

ref引用DOM元素

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

vue.js踩坑之ref如何引用细节点讲解插图

点击按钮后效果如图:

vue.js踩坑之ref如何引用细节点讲解插图1

ref引用组件实例

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

RefCom1组件:

vue.js踩坑之ref如何引用细节点讲解插图2

子组件RefCom2:

vue.js踩坑之ref如何引用细节点讲解插图3

实现效果:

vue.js踩坑之ref如何引用细节点讲解插图4

实现标签的按需切换

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

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

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

vue.js踩坑之ref如何引用细节点讲解插图5

vue.js踩坑之ref如何引用细节点讲解插图6

插槽

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

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

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

匿名插槽

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

例如:

子组件:

vue.js踩坑之ref如何引用细节点讲解插图7

父组件:

vue.js踩坑之ref如何引用细节点讲解插图8

补充:

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

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

vue.js踩坑之ref如何引用细节点讲解插图9

具名插槽

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

例如:

SlotSon组件:

vue.js踩坑之ref如何引用细节点讲解插图10

SlotFather组件:

vue.js踩坑之ref如何引用细节点讲解插图11

vue.js踩坑之ref如何引用细节点讲解插图12

作用域插槽

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

例如:

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

vue.js踩坑之ref如何引用细节点讲解插图13

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

vue.js踩坑之ref如何引用细节点讲解插图14

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

标签

发表评论