时间戳

首页 > 解决方案 > 我可以在父组件的不同部分使用组件的部分html模板吗

vue.js - 我可以在父组件的不同部分使用组件的部分html模板吗

问题描述

我有一个组件，它一个接一个地返回位置，然后是地点，然后是酒店，但我希望这些在 3 个不同的部分中，就像它们在选项卡中显示的那样。

组件代码：

<template>

<li class="col-xs-12" :id="location.id">

    <p class="col-xs-3">{{location.name}} - Days : </p>
    <div class="col-xs-2"><input type="text" v-model="location.days"></div>
    <div class="col-xs-4">
        <!--            {{hotelset(location.id,hotels)}}-->
        <!--            {{typeof (hotels)}}{{index}}-->
        <v-select v-model="hotelselect[location.id]" name="addhotel" label="title"
            @input="addtohotel(index,location.id)" :value="non" :options=hoteloptions[location.id] />
        <!--{{hoteloptions}}-->
        <!--{{$props}}-->
    </div>

    <button @click="remove" class="col-xs-3 btn btn-danger">Remove</button>
    <div></div>

    <div class="col-xs-12" v-for="day in parseInt(location.days)" :key="day">
        Day {{day}}-
        {{preselect(day,defaultt,location.id,place)}}

        <v-select v-model="days[day]" name="addplaceloc" label="title" @input="addtoplaces(day,location.id)"
            :value="defaultt" :options="localplace[location.id][day]" multiple />
        <!--{{localplace[location.id][day]}}-->
        <div v-for="(placeinfo, index) in objj[location.id]['day-'+day]['place']">Place: {{placeinfo['title']}}:

            <label>From:</label><input type="text"
                v-model="objj[location.id]['day-'+day]['place'][index]['from_time']">
            <label>To:</label><input type="text" v-model="objj[location.id]['day-'+day]['place'][index]['to_time']">
            <label>Remark:</label><input type="text"
                v-model="objj[location.id]['day-'+day]['place'][index]['remark']">
            <button @click="run"> yess</button>
        </div>

    </div>

</li>

<!--@click="remove"-->

在上面的代码中，有 2 个v-select和 1 个输入一个接一个地列出，因为它们相互依赖，但我希望它在父 vue 文件的不同选项卡中。如何实现？选项卡有自己的样式和 html 结构。

标签： vue.jsvuejs2vue-componentvuex

解决方案

正如@muka.gergely 所说，重用 HTML 的唯一方法是将其分解为单独的组件。

推荐阅读