如何解决父v-if =“ false”内的Vue子代不会被执行,但是除了默认槽位的Modal包装器内,为什么? Modal.vue App.vue
请参阅此最小示例
1
此最小模板不会引发任何错误,因为父级未呈现任何内容。
<template>
<div v-if="false">
{{ i.dont.have.the.value }}
</div>
</template>
2
现在,如果我使用默认广告位创建模态包装,并且仍然使用v-if
Modal.vue
<template>
<div v-if="show">
<slot />
</div>
</template>
<script>
export default {
props: {
show: Boolean,},};
</script>
但是,这会引发错误,为什么?
App.vue
<template>
<Modal :show="false">
<div>{{ i.dont.have.the.value }}</div>
</Modal>
</template>
<script>
import Modal from "@/components/Modal.vue";
export default {
components: {
Modal,};
</script>
[Vue warn]: Error in render: "TypeError: Cannot read property 'dont' of undefined"
为什么会这样?
我该如何创建一个Modal来确保如果不出现孩子就不会被人欺负?
由于需要转换,因此无法在Modal组件中直接使用v-if
。
解决方法
您在App.vue
中的插槽上犯了一个错误,因为VueJS会尝试根据父范围来解析您的i.dont.have.the.value
变量(您的插槽没有条件)
从官方文档中记住此规则
Everything in the parent template is compiled in parent scope; everything in the child template is compiled in the child scope.
https://vuejs.org/v2/guide/components-slots.html#Compilation-Scope
只需在正确的范围内定义变量,就可以了(如果您在子组件中定义该变量,并想将其公开给父组件,请使用有范围的插槽)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。