我有一个像这样的组件：
<div class="home-hero-copy center">
<p>Our mission is to <span class="color-hero">organize</span> the world’s <span class="color-hero">information</span> and make it <span class="color-hero">universally accessible</span> and <span class="color-hero">useful</span>.</p>
</div>
我声明如下：
<test></test>
然后将Vue.component('test', {
data: {
showModal: true
},
methods: {
displayComponentModalDialog: function() {
this.showModal = true;
}
},
template: `<button @click='displayComponentModalDialog'>test</button>`
});
组件放置在<test></test>包装器中的某个位置。
<div id="#app">现在，我想在测试组件中显示另一个组件。因此，在这种情况下，我希望单击测试组件中的按钮后出现一个对话框。我无法实现这一目标。
我所做的是添加一个新组件：
var app = new Vue({
router,
el: '#app',
// etc.
})
然后是以下代码，尽管我不确定是否将其放在哪里。
Vue.component('dialog', {
template: '#dialog-template'
});
我尝试将这段代码放在<!-- template for the modal component -->
<script type="text/x-template" id="dialog-template">
<transition name="dialog">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
<button class="btn btn-primary" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<!-- use the modal component, pass in the prop -->
<dialog v-if="showModal" @close="showModal = false">
<h3 slot="header">header</h3>
<p slot="body">
test
</p>
</dialog>
内，但是不起作用。如果将其放在组件结构的template属性中，它只会抱怨一个根元素。
很明显，我很想念一些基本概念，这在VueJS中实际上是如何工作的。有人可以帮我澄清一下吗？谢谢。
答案 0 :(得分：1)
据我所知，您的组件确实没有根标签。模板必须具有根标记。
这不是有效的Vue模板：
<div>
<h1>Stuff</h1>
</div>
<h2>Other stuff</h2>
这是有效的Vue模板：
<div>
<div>
<h1>Stuff</h1>
</div>
<h2>Other stuff</h2>
</div>
请注意，在第二个版本中，模板只有一个根元素<div>，而在第一个版本中则没有。
您的组件模板中同时有<script></script>和<dialog></dialog>。
答案 1 :(得分：0)
如果要在test组件中添加另一个组件。您可以在其上使用slot。
您可以参考以下文档：https://vuejs.org/v2/guide/components-slots.html
示例：
//component 1
<template>
<div id="modal">
// do something for your modal here.
<slot></slot> // reserve area for your another html or component.
</div>
</template>
// component 2
<template>
<your-modal-component>
<another-component>
</your-modal-component>
</template>