Question

我记得我曾经看过在VUE中导入组件后如何将值放在html文本区域中。

我不确定是否有办法做到这一点，或者我只是以错误的方式记住事情。

我的代码如下。

<template>
    <div class="container">
        <div class="row">
            <Heading></Heading>
        </div>
        <hr>
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <ul class="list-group">
                    <comp v-for='(value,index) in listing' :key='index'>{{value}}</comp>
                </ul>

            </div>
            <serverstat></serverstat>
        </div>
        <hr>
        <div class="row">
            <footing></footing>
        </div>
    </div>
</template>

<script>
import Heading from './assets/Heading.vue';
import comp from './assets/comp.vue';
import serverstat from './assets/serverstatus.vue';
import footing from'./assets/footing.vue';

export default {
data() {
    return {
        listing: ['max','toms','judy','michael','dumdum']
    }
},

    components: {
        Heading,comp,serverstat,footing
    },
};
</script>

<style>

</style>

-comp-

<template>
   <li class="list-group-item">
    </li>
</template>

<script>
export default {

}
</script>

<style>

</style>

我渲染了这个之后它不显示{{value}}。它只显示空白。

如何在html元素中插入{{value}}？

谢谢。

Answer 1

使用v-for时，它将调用数组中的所有值，而:key='index'定义数组中的每个对象行。如果您的对象列表由名字，姓氏组成，则您要打印的值将为{{value.firstname}}。您缺少值中的对象名称。

您能尝试一次吗？

<comp v-for='(value,index) in listing' :key='index'>{{value.index}}</comp>

Answer 2

<comp v-for='(value,index) in listing' :key='index'>
   <slot>{{ value }} </slot>
</comp>

然后在comp组件中将插槽用作

<slot/>

由于您不想使用道具，因此不包括道具方法。使用上面的链接来了解有关广告位的更多信息。

Answer 3

由于要在组件内部输入值，因此可以使用组件中的插槽来渲染，如下所示：< / p>

<template>
   <li class="list-group-item">
       <slot />
    </li>
</template>

VUE-如何将值放入导入的组件中？

3 个答案: