Vue 'expose' 选项
示例
使用 expose 选项使方法可供父组件使用。
export default {
expose: ['createMessage'],
data() {
return {
message: ' '
}
},
methods: {
createMessage(msg) {
this.message += msg + ' '
}
}
}
查看下面的更多示例
定义和用法
expose 选项用于列出哪些属性可通过模板引用供父组件使用。
默认情况下，所有子组件属性都可通过使用模板引用供父组件使用。
这意味着，如果子组件没有 expose 选项，而父组件在子组件上使用内置属性 ref="childComp"，则父组件可以通过代码 this.$refs.childComp.message 访问子组件中的一个数据属性"message" 。 （参见示例1）
但是，当使用 expose 选项时，只有 expose 选项中列出的属性可供父级使用。 （参见示例2）
更多示例
示例 1
子组件中不使用 expose 选项，因此子组件中的所有属性都可供父组件使用。
ChildComp.vue:
<template>
<div>
<h3>ChildComp.vue</h3>
<p>来自父组件的消息:</p>
<p id="pEl">{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ' '
}
},
methods: {
createAlert() {
alert('这是来自子组件的警报')
}
}
}
</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 模板参考
Vue 教程:Vue 组件
Vue 参考:Vue 'ref' 属性
Vue 参考:Vue $refs 对象
