Vue 'expose' 选项
示例
使用 expose 选项使一个方法可供父组件使用。
export default {
expose: ['createMessage'],
data() {
return {
message: ' '
}
},
methods: {
createMessage(msg) {
this.message += msg + ' '
}
}
}
查看下面的更多示例
定义和用法
expose 选项用于列出哪些属性可以通过模板引用（template refs）提供给父组件。
默认情况下，所有子组件的属性都可以通过使用模板引用供父组件访问。
这意味着，如果子组件没有 expose 选项，并且父组件在子组件上使用了内置属性 ref="childComp"，那么父组件可以使用代码 this.$refs.childComp.message 来访问子组件中的数据属性 'message'。（请参见示例 1）
但是，在使用 expose 选项时，只有 expose 选项中列出的属性才能被父组件访问。（请参见示例 2）
更多示例
示例 1
在子组件中未使用 expose 选项，因此子组件中的所有属性都可以供父组件访问。
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>
示例 2
从父组件调用子组件的 'createMessage' 方法不起作用，因为子组件的 expose 选项只列出了 'message' 数据属性。
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（高亮显示的行不起作用）
<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>
相关页面
Vue 教程：Vue Template Refs
Vue 教程：Vue Components
Vue 参考：Vue 'ref' 属性
Vue 参考：Vue $refs 对象
