<body>
?? ?<div id="app">
?? ??? ?<div?
?? ??? ??? ?ref="hello"
?? ??? ??? ?@click="handleClick"
?? ??? ?>
?? ??? ??? ?hello , 通過(guò)ref命名引用 操作DOM元素 !
?? ??? ?</div>
?? ?</div>
?? ??? ?<script>
?? ??? ?var app = new Vue({
?? ??? ? ?el: '#app',
?? ??? ? ?methods: {
?? ??? ? ??? ?handleClick: function() {?? ??? ? ??? ??? ??? ??? ?alert(this.$refs.hello.innerHTML);
?? ??? ? ??? ?}
?? ??? ? ?}
?? ??? ?})
?? ?</script>
</body>

注意：this.$refs指頁(yè)面所有引用。

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>

下面我們?cè)俳o一個(gè)需求：數(shù)字的求和運(yùn)算。

全部代碼如下：

<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')//父組件中監(jiān)聽(tīng)變化
?? ??? ??? ? ??? ?}
?? ??? ??? ?}
?? ??? ?})
?? ??? ?
?? ??? ?//父組件
?? ??? ?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是個(gè)對(duì)象！

這里使用了父子通信$emit()，不懂沒(méi)關(guān)系，可以翻典籍或查看對(duì)應(yīng)的講解博客。

ref引用及插槽

ref引用

ref被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的$refs對(duì)象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子組件上，引用就指向組件實(shí)例。（可用于訪問(wèn)子組件實(shí)例或子元素）

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

當(dāng)v-for用于元素或組件的時(shí)候，引用的信息將是包含DOM節(jié)點(diǎn)或組件實(shí)例的數(shù)組。

注意：因?yàn)閞ef本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時(shí)候你還不能訪問(wèn)它們，因?yàn)樗鼈冞€不存在。

ref引用DOM元素

引用ref引用頁(yè)面上的DOM元素：

在這里插入圖片描述

點(diǎn)擊按鈕后效果如圖：

在這里插入圖片描述

ref引用組件實(shí)例

要使用 ref 引用頁(yè)面上的組件實(shí)例：父組件訪問(wèn)子組件實(shí)例

RefCom1組件：

在這里插入圖片描述

子組件RefCom2：

在這里插入圖片描述

實(shí)現(xiàn)效果：

在這里插入圖片描述

實(shí)現(xiàn)標(biāo)簽的按需切換

通過(guò)布爾值 inputVisible 來(lái)控制組件中的文本框與按鈕的按需切換，希望文本框顯示出來(lái)后立即獲得焦點(diǎn)。

補(bǔ)充： this.$nextTick(cb)方法

組件的$nextTick(callback)方法，會(huì)把callback回調(diào)函數(shù)推遲到下一個(gè)DOM更新周期之后執(zhí)行。通俗講，就是等組件的DOM異步地重新渲染完成后，再執(zhí)行callback回調(diào)函數(shù)，從而能保證callback回調(diào)函數(shù)可以操作到最新的DOM元素。

在這里插入圖片描述