Question

我的代码不起作用。我想将任务打印在列表中，但是现在没有列表项显示。 https://prnt.sc/pd6yx5 我想这样显示https://prnt.sc/pd6zoe 我想要组件概念中的组件

HTML：

<div class="childcomponents-wrap">
    <div class="container"> 
        <div class="row">
            <div class="col-md-12 col-sm-12 col-12">
                <div id="childtasks"> 
                    <h2>Vue Components within Components</h2>
                    <task-list></task-list>
                </div>
            </div>
        </div>
    </div>
</div>

JS（Vue.js）：

Vue.component('task-list', {
    template:
        '<div>
            <task v-for="task in tasks">{{ task.task }}</task>
        </div>',

    data(){
        return {
            tasks: [
                {task: 'Go to the United States', complete: true},
                {task: 'Go to Kerala', complete: true},
                {task: 'Go to Tamil Nadu', complete: false},
                {task: 'Go to Simla', complete: true}
            ]
        };
    }
});

Vue.component('task', {
    template: '<li><slot></slot></li>'
});

new Vue({
    el: '#childtasks'
});

Answer 1

您可以通过从tasks发送task component作为道具并渲染任务道具来实现。希望对您有所帮助。

Vue.component('task-list', {

    template:
    '<div>
        <task :tasks="tasks"></task>
    </div>',

        data(){

            return {

                tasks: [

                {task: 'Go to the United States', complete: true},
                {task: 'Go to Kerala', complete: true},
                {task: 'Go to Tamil Nadu', complete: false},
                {task: 'Go to Simla', complete: true}

                ]
            };
        }
    });

    Vue.component('task', {     
    props: ['tasks'],
    template: '<li v-for="task in tasks"><slot>{{task.task}}</slot></li>'

    });

    new Vue({

        el: '#childtasks'

    });

Answer 2

您可以这样完成：

组件结构：

Vue.component('task-list', {
    template: 
        `<div>
            <li v-for="task in tasks">{{ task.task }}</li>
        </div>`,
    data(){
        return {
            tasks: [
                {task: 'Go to the United States', complete: true},
                {task: 'Go to Kerala', complete: true},
                {task: 'Go to Tamil Nadu', complete: false},
                {task: 'Go to Simla', complete: true}
            ]
        };
    }
});

new Vue({
    el: '#childtasks',
});

调用组件：

<div id="childtasks">
  <task-list></task-list>
</div>

选中此 working code sample 。

清单项目未使用Vue.js中的组件概念中的组件显示

2 个答案: