如何加载 Vuejs单个文件组件的一部分
问题描述：
关于我问here的问题，我意识到我的问题可能是因为模板在脚本之前加载以及出现错误变量未定义，它会停止脚本运行。如果是这种情况，那可能是因为use strict，它在我的node_modules中，而不是在我的代码中。如何加载 Vuejs单个文件组件的一部分<template>
我的部件是这样的：
<style lang="sass">
.hero {
color: white;
padding-top: 10em;
}
.image {
background: no-repeat;
background-size: 100% 100%;
height: 600px;
box-shadow:inset 0 0 0 2000px rgba(0,0,50,0.3);
}
</style>
<template>
<div :style="{ backgroundImage: 'url(' + components.carousel.content.image + ')' }" class="image">
<div class="row hero">
<div class="small-8 medium-6 columns">
<h2>Welcome to <strong>{{components.site.name}}</strong>
<br/> {{components.carousel.content.tag_line}}</h2>
<br>
<p>
{{components.carousel.content.perks_1}} |
{{components.carousel.content.perks_2}} |
{{components.carousel.content.perks_3}}
</p>
</div>
</div>
</div>
</template>
<script>
import homepageMixin from '../mixin';
export default {
mixins: [homepageMixin],
data: function() {
return {
components: ''
}
}
}
</script>
当我打开我得到这个错误：
[Vue warn]: Error when rendering component carousel: ...
vue.js?3de6:2229 Uncaught TypeError: Cannot read property 'content' of undefined
我一直在使用它一样，很长一段时间，因为它是加载后的数据并在模板中替换它，但是在我尝试安装babel之后，它现在以某种方式强制执行use strict。当我检查编译的JS文件之前和之后的差异时，我意识到该行在底部，但现在它在我的组件之前被编译在顶部。
var g;\r\n\r\n// This works in non-strict mode\r\ng = (function() { return this; })();
解决方法是首先加载脚本，以便在模板加载数据时可用。我怎样才能做到这一点？
答
这不会是一个问题，如果你打电话components.carousel，但你试图得到嵌套的属性是嵌套的未定义。这与VueJS问题无关。 但是，将所有可能未定义的内容都放在v-if之间是相关的。在你的情况下，在顶部节点元素上使用v-if='components.carousel'。它会很好地工作。
现在可以使用，但您能否想到之前未使用v-if的原因？ –
您在模板中使用了“components.carousel.content.image”，但是在您刚刚声明的组件的data属性中组件为空字符串。 因此，在组件的第一次渲染时，会得到这个“尝试获取未定义的属性”。 – Borjante