Tùy chọn 'phơi bày' của Vue
Ví dụ
Sử dụng tùy chọn expose
để cung cấp phương thức cho thành phần chính sử dụng.
export default {
expose: ['createMessage'],
data() {
return {
message: ' '
}
},
methods: {
createMessage(msg) {
this.message += msg + ' '
}
}
}
Chạy ví dụ »Xem thêm ví dụ bên dưới
Định nghĩa và cách sử dụng
Tùy chọn expose
được sử dụng để liệt kê các thuộc tính có sẵn cho thành phần chính thông qua các tham chiếu mẫu.
Theo mặc định, tất cả các thuộc tính thành phần con đều có sẵn cho thành phần cha mẹ thông qua việc sử dụng các tham chiếu mẫu.
Điều này có nghĩa là nếu thành phần con không có tùy chọn expose
và thành phần cha mẹ sử dụng thuộc tính tích hợp ref="childComp"
trên thành phần con, thì thành phần cha mẹ có thể truy cập 'thông báo' thuộc tính dữ liệu trong thành phần con bằng mã this.$refs.childComp.message
. (Xem ví dụ 1)
Tuy nhiên, khi sử dụng tùy chọn expose
, chỉ các thuộc tính được liệt kê trong tùy chọn expose
có sẵn cho cấp độ gốc. (Xem ví dụ 2)
Thêm ví dụ
ví dụ 1
Tùy chọn expose
không được sử dụng trong thành phần con, vì vậy tất cả các thuộc tính trong thành phần con đều có sẵn cho thành phần cha.
ChildComp.vue
:
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Message from parent component:</p>
<p id="pEl">{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ' '
}
},
methods: {
createAlert() {
alert('This is an alert, from the child component')
}
}
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
#pEl {
background-color: lightgreen;
font-family: 'Courier New', Courier, monospace;
}
</style>
App.vue
:
<template>
<h2>Example expose Option</h2>
<p>The 'expose' option is not used, so all child properties are available to the parent by default, both the 'message' data property, and the 'createAlert()' method:</p>
<button v-on:click="{ this.$refs.childComp.message += 'Hello! '; }">Write 'Hello!'</button>
<button v-on:click="{ this.$refs.childComp.createAlert(); }">Create alert</button>
<child-comp ref="childComp"/>
</template>
Chạy ví dụ »Ví dụ 2
Việc sử dụng phương thức 'createMessage' trong thành phần con từ thành phần cha mẹ không hoạt động vì chỉ thuộc tính dữ liệu 'message' được liệt kê trong tùy chọn expose
của thành phần con.
ChildComp.vue
:
<template>
<div>
<h3>ChildComp.vue</h3>
<p>Message from parent component:</p>
<p id="pEl">{{ message }}</p>
</div>
</template>
<script>
export default {
expose: ['message'],
data() {
return {
message: ' '
}
},
methods: {
createMessage(msg) {
this.message += msg + ' '
}
}
}
</script>
<style scoped>
div {
border: solid black 1px;
padding: 10px;
max-width: 350px;
margin-top: 20px;
}
#pEl {
background-color: lightgreen;
font-family: 'Courier New', Courier, monospace;
}
</style>
App.vue
(dòng được đánh dấu không hoạt động):
<template>
<h2>Example expose Option</h2>
<p>Only the 'message' data property is listed in the 'expose' option, so the 'createMessage' method from the child component is not available, and will not work:</p>
<input type="text" v-model="inpText" placeholder="Write something">
<button v-on:click="useMet">Use exposed method</button>
<child-comp ref="childComp"/>
</template>
<script>
export default {
data() {
return {
inpText: ''
}
},
methods: {
useMet() {
this.$refs.childComp.createMessage(this.inpText);
}
},
mounted() {
this.$refs.childComp.message = 'Initial message!';
}
}
</script>
Chạy ví dụ »Trang liên quan
Hướng dẫn về Vue: Tham khảo mẫu Vue
Hướng dẫn về Vue: Thành phần Vue
Tham chiếu Vue: Thuộc tính Vue 'ref'
Tham chiếu Vue: Đối tượng Vue $refs