<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>

下面我們再給一個需求：數(shù)字的求和運算。

全部代碼如下：

<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)聽變化
?? ??? ??? ? ??? ?}
?? ??? ??? ?}
?? ??? ?})
?? ??? ?
?? ??? ?//父組件
?? ??? ?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()，不懂沒關(guān)系，可以翻典籍或查看對應的講解博客。

ref引用及插槽

ref引用

ref被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的$refs對象上。如果在普通的DOM元素上使用，引用指向的就是DOM元素；如果用在子組件上，引用就指向組件實例。（可用于訪問子組件實例或子元素）

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

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

注意：因為ref本身是作為渲染結(jié)果被創(chuàng)建的，在初始渲染的時候你還不能訪問它們，因為它們還不存在。

ref引用DOM元素

引用ref引用頁面上的DOM元素：

在這里插入圖片描述

點擊按鈕后效果如圖：

在這里插入圖片描述

ref引用組件實例

要使用 ref 引用頁面上的組件實例：父組件訪問子組件實例

RefCom1組件：

在這里插入圖片描述

子組件RefCom2：

在這里插入圖片描述

實現(xiàn)效果：

在這里插入圖片描述

實現(xiàn)標簽的按需切換

通過布爾值 inputVisible 來控制組件中的文本框與按鈕的按需切換，希望文本框顯示出來后立即獲得焦點。

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

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

在這里插入圖片描述