我最终会为每个页面嵌套很多不同的组件。我的应用程序中的每个页面都有一个组件 View 。在每个页面上,都有不同的 Vue 实例,它们将重复使用我制作的组件,例如 slider 、标签、旋转木马等。
我正在尝试重组它,因为许多 Vue 实例相互干扰,我意识到我应该只有一个包含许多内部组件的主 Vue 实例。
这是我到目前为止设置的:
问题是它在加载主页 View 组件后停止。它不会加载任何嵌套组件,除非我为它们设置了模板,但我不想这样做,因为我想利用 Laravel Blade 语法而不是使用常规 HTML。加上我所有的服务器端助手等。
Javascript:
var App = new Vue({
el: '#app',
attached: function() {
console.log('main app loaded');
},
components: {
'home-view': {
attached: function() {
console.log('home view loaded');
},
components: {
'home-slider': {
attached: function() {
console.log('homepage slider loaded');
},
components: {
'slider': {
template: '#slider-template',
replace: true,
attached: function() {
console.log('general slider component loaded');
},
components: {
'slide': {
template: '#slide-template',
replace: true,
props: ['index', 'text'],
attached: function() {
console.log('general slide component loaded');
}
}
}
}
}
}
}
}
}
});
HTML:
<script type="x-template" id="slider-template">
<div class="slider">
<content></content>
</div>
</script>
<script type="x-template" id="slide-template">
<div class="slide" id="slide{{ index }}">
{{ text }}
</div>
</script>
<div id="app">
<component is="home-view">
<div id="slideshow" v-component="slider" inline-template>
<slider>
<slide index="1" text="Slide #1"></slide>
<slide index="2" text="Slide #2"></slide>
</slider>
</div>
<p>More content specific to the homepage here.</p>
</component>
</div>
我可能想多了,但感谢您的任何帮助/想法!
最佳答案
我遇到了类似的问题。您也可以通过将“inline-template”属性放在“home-view”组件上来解决它:
<div id="app">
<component inline-template is="home-view">
<div id="slideshow" v-component="slider" inline-template>
<slider>
<slide index="1" text="Slide #1"></slide>
<slide index="2" text="Slide #2"></slide>
</slider>
</div>
<p>More content specific to the homepage here.</p>
</component>
如果应用了内联模板属性,则组件的 innerHTML 被视为组件模板。
关于javascript - 带有内联模板的 Vuejs 嵌套组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32634702/