Tham chiếu mẫu Vue
Tham chiếu mẫu Vue được sử dụng để đề cập đến các thành phần DOM cụ thể.
Khi thuộc tính ref
được đặt trên thẻ HTML, phần tử DOM thu được sẽ được thêm vào đối tượng $refs
.
Chúng ta có thể sử dụng thuộc tính ref
và đối tượng $refs
trong Vue để thay thế cho các phương thức trong JavaScript đơn giản như getElementById() hoặc querySelector().
Thuộc tính 'ref' và đối tượng '$refs'
Các thẻ HTML có thuộc tính ref
sẽ được thêm vào đối tượng $refs
và có thể truy cập sau này từ bên trong thẻ <script>
.
Ví dụ
Văn bản bên trong phần tử <p>
bị thay đổi.
App.vue
:
<template>
<h1>Example</h1>
<p>Click the button to put "Hello!" as the text in the green p element.</p>
<button @click="changeVal">Change Text</button>
<p ref="pEl">This is the initial text</p>
</template>
<script>
export default {
methods: {
changeVal() {
this.$refs.pEl.innerHTML = "Hello!";
}
}
}
</script>
Chạy ví dụ » Dưới đây là một ví dụ khác trong đó đối tượng $refs
được sử dụng để sao chép giá trị của một thẻ này sang một thẻ khác.
Ví dụ
Văn bản từ thẻ <p>
đầu tiên được sao chép sang thẻ <p>
thứ hai.
App.vue
:
<template>
<h1>Example</h1>
<p ref="p1">Click the button to copy this text into the paragraph below.</p>
<button @click="transferText">Transfer text</button>
<p ref="p2">...</p>
</template>
<script>
export default {
methods: {
transferText() {
this.$refs.p2.innerHTML = this.$refs.p1.innerHTML;
}
}
};
</script>
Chạy ví dụ »Nhận giá trị đầu vào từ '$refs'
Chúng ta có thể đi sâu hơn vào phần tử HTML được thêm vào đối tượng $refs
để truy cập bất kỳ thuộc tính nào chúng ta muốn.
Ví dụ
Phần tử <p>
có cùng nội dung với nội dung được viết trong trường đầu vào.
App.vue
:
<template>
<h1>Example</h1>
<p>Start writing inside the input element, and the text will be copied into the last paragraph by the use of the '$refs' object.</p>
<input ref="inputEl" @input="getRefs" placeholder="Write something..">
<p ref="pEl"></p>
</template>
<script>
export default {
methods: {
getRefs() {
this.$refs.pEl.innerHTML = this.$refs.inputEl.value;
}
}
};
</script>
Chạy ví dụ »'ref' với v-for
Các phần tử HTML được tạo bằng v-for
, với thuộc tính ref
, sẽ được thêm vào đối tượng $refs
dưới dạng một mảng.
Ví dụ
Nút này hiển thị phần tử danh sách thứ ba được lưu trữ dưới dạng phần tử mảng bên trong đối tượng $refs
.
App.vue
:
<template>
<h1>Example</h1>
<p>Click the button to reveal the 3rd list element stored as an array element in the $refs object.</p>
<button @click="getValue">Get the 3rd list element</button><br>
<ul>
<li v-for="x in liTexts" ref="liEl">{{ x }}</li>
</ul>
<pre>{{ thirdEl }}</pre>
</template>
<script>
export default {
data() {
return {
thirdEl: ' ',
liTexts: ['Apple','Banana','Kiwi','Tomato','Lichi']
}
},
methods: {
getValue() {
this.thirdEl = this.$refs.liEl[2].innerHTML;
console.log("this.$refs.liEl = ",this.$refs.liEl);
}
}
};
</script>
<style>
pre {
background-color: lightgreen;
display: inline-block;
}
</style>
Chạy ví dụ »