VUE-如何把数值放在导入的组件里面？

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

由于你输入的是一个值 里面 的组件，您可以 渲染 它通过使用 槽口 像这样。

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

Answer 2

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

然后在编译组件中使用槽作为

<slot/>

不包括道具的方法，因为你不想用这个。使用上面的链接来了解更多关于插槽的信息。

Answer 3

当你使用v-for时，它会调用一个数组中的所有值，并且 :key='index' 从一个数组中定义了每一行对象，如果你的对象列表是由name，lastname作为对象，那么你想打印的值将是{{value.firstname}}。如果你的对象列表中包含了名字，lastname作为你的对象，那么你想打印的值将是{{value.firstname}}。你的值中缺少对象名。

你能不能试一试。

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