Javascript 带有内联模板的 Vuejs 嵌套组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32634702/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vuejs nested components with inline-template
提问by HaleyBuggs
I'm going to end up having a LOT of different components nested for each page. I have a component view for each page in my application. On each page, there are different Vue instances that will re-use components I have made such as slider's, tabber's, carousel, etc.
我最终会为每个页面嵌套很多不同的组件。我的应用程序中的每个页面都有一个组件视图。在每个页面上，都有不同的 Vue 实例可以重用我制作的组件，例如滑块、选项卡、轮播等。
I'm trying to restructure this since a lot of Vue instances were interfering with each other and I realized I should only have one main Vue instance with a lot of inner components.
我正在尝试重构它，因为很多 Vue 实例相互干扰，我意识到我应该只有一个带有许多内部组件的主 Vue 实例。
This is what I have set up so far:
这是我到目前为止设置的：
The problem is is that it stops after loading the home view component. It won't load any nested components unless I have a template set for them which I don't want to do because I want to take advantage of Laravel blade syntax and not use regular HTML. Plus all of my server-side helpers, etc.
问题是它在加载主视图组件后停止。它不会加载任何嵌套组件，除非我为它们设置了模板，我不想这样做，因为我想利用 Laravel 刀片语法而不使用常规 HTML。加上我所有的服务器端助手，等等。
Javascript:
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:
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>
I might be overthinking this, but thank you for any help/ideas!
我可能想多了，但感谢您的任何帮助/想法！
回答by Lee Overy
I had a similar problem. You can solve it by putting the "inline-template" attribute on your 'home-view' component aswell:
我有一个类似的问题。您也可以通过将“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>
The innerHTML of the component is considered the components template if the inline-template attribute it applied.
如果应用了 inline-template 属性，则组件的 innerHTML 被视为组件模板。
回答by David K. Hess
You are mixing up the concept of a template for a component with existing content that might exist in a component when compiled. In AngularJS, this is referred to as "transclusion". In Vue, it is referred to as "Content Insertion" and you can read more about it here:
您将组件的模板概念与编译时可能存在于组件中的现有内容混在一起。在 AngularJS 中，这被称为“嵌入”。在 Vue 中，它被称为“内容插入”，您可以在此处阅读更多相关信息：
http://vuejs.org/guide/components.html#Content_Insertion
http://vuejs.org/guide/components.html#Content_Insertion
Basically, you need to use the Content Insertion techniques to get the effect of reusing content present in a component when it is compiled. Otherwise, a component assumes all of its content comes from its template.
基本上，您需要使用内容插入技术来获得在编译时重用组件中存在的内容的效果。否则，组件假定其所有内容都来自其模板。
