我制作了两个VueJS组件，一个显示一个模式，另一个显示几个HTML输入。
两个组件单独使用时都可以正常工作，但是当我嵌套它们时，内部组件不会出现在DOM内部。我在做什么错了？
我的主要html如下：
<modal-dialog v-show="Modal"
title="Add transducer">
<add-transducer></add-transducer>
</modal-dialog>
我的两个组件如下：
Vue.component('modal-dialog', {
props: ['title'],
template: `<div class="background-modal" >
<div class="row justify-content-center align-items-center">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="graph-wrapper" id="AddTransducer">
<h3>{{ title }}</h3> <i class="fa fa-times-circle float-right color-red"></i>
<div class="max-height-75vh">
</div>
</div>
</div>
</div>
</div >`,
methods: {
}
});
和
Vue.component('add-transducer', {
props: [''],
template: `<form id="addTransducer" v-on:submit="formValidation($event)">
<!------ Location ------>
<label class="margin-top-20 " for="cbLocation">Location*</label>
<select id="cboLocation" name="cbLocation" v-if="showSelectLocation === true" v-model="cbLocation">
<option selected disabled> -- select a Location -- </option>
<option v-for="loc in lstLocations" :value="loc.RecID">{{loc.Name}}</option>
</select>
<!-- Add button -->
<a v-if="btnAddLocation === true" v-on:click="freeInput('location')" class="add-button blue-gradient float-right" href="#"><i class="fa fa-plus"></i></a>
<!-- Delete Button -->
<a v-on:click="deleteInput('location')" v-if="btnDeleteLocation === true" class="add-button red-background float-right" href="#"><i class="fa fa-times"></i></a>
<!-- Text input field to add new Location -->
<input id="tbFreeInputLocation" name="tbFreeInputLocation" v-if="tbFreeInputLocation === true" v-model="inputLocation" type="text" class="free-input" :placeholder="tbFreeInputPlaceholder" />
<p v-if="errors.length" class="color-red "><i class="fa fa-exclamation-circle"></i> {{errors[0]}}</p>
<!------ Manufacturer ------>
<label for="cbManufacturer" class="margin-top-20">Manufacturer*</label>
<select name="cbManufacturer" v-if="showSelectManufacturer === true" v-model="cbManufacturer">
<option selected disabled> -- select a Manufacturer -- </option>
<option v-for="manuf in lstManufacturers" :value="manuf.RecID">{{manuf.Name}}</option>
</select>
<!-- Add button -->
<a v-if="btnAddManufacturer === true" v-on:click="freeInput('manufacturer')" class="add-button blue-gradient float-right" href="#"><i class="fa fa-plus"></i></a>
<!-- Delete Button -->
<a v-on:click="deleteInput('manufacturer')" v-if="btnDeleteManufacturer === true" class="add-button red-background float-right" href="#"><i class="fa fa-times"></i></a>
<!-- Text input field to add new Manufacturer -->
<input id="tbFreeInputManufacturer" name="tbFreeInputManufacturer" v-if="tbFreeInputManufacturer === true" v-model="inputManufacturer" type="text" class="free-input" :placeholder="tbFreeInputPlaceholder" />
<p v-if="errors.length" class="color-red "><i class="fa fa-exclamation-circle"></i> {{errors[1]}}</p>
<!------ Model ------>
<label for="cbModel" class="margin-top-20">Model*</label>
<select name="cbModel" v-if="showSelectModel === true" v-model="cbModel">
<option selected disabled> -- select a Model -- </option>
<option v-for="model in lstModels" :value="model.RecID">{{model.Model}}</option>
</select>
<!-- Add button -->
<a v-if="btnAddModel === true" v-on:click="freeInput('model')" class="add-button blue-gradient float-right" href="#"><i class="fa fa-plus"></i></a>
<!-- Delete Button -->
<a v-on:click="deleteInput('model')" v-if="btnDeleteModel === true" class="add-button red-background float-right" href="#"><i class="fa fa-times"></i></a>
<!-- Text input field to add new Manufacturer -->
<input id="tbFreeInputModel" name="tbFreeInputModel" v-if="tbFreeInputModel === true" v-model="inputModel" type="text" class="free-input" :placeholder="tbFreeInputPlaceholder" />
<p v-if="errors.length" class="color-red "><i class="fa fa-exclamation-circle"></i> {{errors[2]}}</p>
<!-- Serial Number -->
<label for="tbSerial" class="margin-top-20">Serial Number*</label>
<input type="text" name="tbSerial" v-model="tbSerial" />
<p v-if="errors.length" class="color-red "><i class="fa fa-exclamation-circle"></i> {{errors[3]}}</p>
<!-- Inventory Number -->
<label for="tbInventory" class="margin-top-20">Inventory Number</label>
<input type="text" name="tbInventory" v-model="tbInventory" />
<!-- Date installed -->
<label for="tbDate" class="margin-top-20">Date installed</label>
<input type="date" name="tbDate" v-model="tbDate" />
<!-- Description -->
<label for="tbDescription" class="margin-top-20">Description</label>
<textarea name="tbDescription" v-model="tbDescription"></textarea>
<button type="submit" class="blue-gradient float-right margin-bottom-40"><i class="fa fa-plus"></i> Add</button>
</form>`,
methods: {
},
mounted: function () {
var self = this;
$.get("/IQMonitor/GetAddTransducerModel",
{
//Room for parameters
},
function (data, status) {
//Successfully added
//Add row to table
if (status === "success") {
//Add locations to selectionbox
self.lstLocations = [];
for (var i = 0; i < data.Locations.length; i++) {
self.lstLocations.push(data.Locations[i]);
}
////Add manufacturers to selectionbox
//vueApp.lstManufacturers = [];
//for (var i = 0; i < data.Manufacturers.length; i++) {
// coAddTransducer.lstManufacturers.push(data.Manufacturers[i]);
//}
}
});
},
data: function () {
return {
showSelectLocation: true,
showSelectManufacturer: true,
showSelectModel: true,
tbFreeInputLocation: false,
tbFreeInputManufacturer: false,
tbFreeInputModel: false,
inputLocation: '',
inputManufacturer: '',
inputModel: '',
tbFreeInputPlaceholder: '',
btnDeleteLocation: false,
btnDeleteManufacturer: false,
btnDeleteModel: false,
btnAddLocation: true,
btnAddManufacturer: true,
btnAddModel: true,
errors: [],
cbLocation: null,
cbManufacturer: null,
cbModel: null,
tbSerial: null,
tbInventory: null,
tbDate: null,
tbDescription: null,
lstLocations: [],
lstManufacturers: [],
lstModels: []
};
}
});
答案 0 :(得分：0)
您需要使用slots，它们是Vue组件的一种机制，允许您以严格的父子关系以外的其他方式来组成组件。插槽为您提供了将内容放置在新位置或使组件更通用的渠道。
<div class="max-height-75vh">
<slot></slot>
</div>
<modal-dialog v-show="Modal" title="Add transducer">
<add-transducer></add-transducer>
</modal-dialog>