Question

我正在尝试从模板中的stage-execs组件访问job_execs ...

job_execs是在vue根目录中创建的，我试图通过在stage-execs组件的props中调用它来访问它。

<div id="vue-job">
<div class="column">
    <div class="row">
        <h3>test</h3>
        <stage-execs></stage-execs>
    <br><br>
</div>
</div>


<script>
    Vue.component('stage-execs', {
        delimiters: [ '[[', ']]' ],
        props: ['job_execs'],
        data: function() {
                return {
                    job_execs: job_execs
                }
            },
        template: `
        <ul id="example-1">
          <li v-for="item in job_execs">
            [[ item.build_id ]]
          </li>
        </ul>
        `,
    });

    var v_root = new Vue({
        delimiters: [ '[[', ']]' ],
        el: '#vue-job',
        data: {
            job_execs: []
        },
        created() {
            url="http://{{ api_endpoint }}"
            fetch(url)
                .then(response => response.json())
                .then(body => {
                    for(i=0; i<body.length; i++){
                        this.job_execs.push({
                            'build_id': JSON.stringify(body[i].build_id),
                            'status': JSON.stringify(body[i].status.name),
                        })
                    }
            })
            .catch( err => {
                console.log('Error Fetching:', url, err);
                return { 'failure': url, 'reason': err };
            });

        },
    });

在stage-execs组件中访问job_execs的正确方法是什么？

Answer 1

在VueJS中，您总是使用props将数据从父级（在您的情况下为根）传递到组件（stage-execs组件）。

所以回答你的问题

在stage-execs中访问job_execs的正确方法是什么组件？

答案是：有了道具。在组件上定义一个prop并从父对象传递一个值。

在组件中，您定义了道具job_execs，但没有传递任何内容。

<stage-execs></stage-execs>

它缺少道具。因此，您的html应该是：

<div id="vue-job">
<div class="column">
    <div class="row">
        <h3>test</h3>
        <stage-execs :job_execs="job_execs"></stage-execs>
    <br><br>
</div>
</div>

请注意组件中的差异。

我将组件上的job_execs属性绑定到根目录中的数据属性job_execs。请注意，: job_execs=与v-bind:job_execs=等价，并且是对组件上props的引用。传递的值是您根目录下的data属性。抱歉，如果我过分习惯，我只是想避免造成混淆，因为组件上的属性和root中的data属性具有相同的名称。

在您的组件中，无需创建名为job_execs的数据属性，实际上，您永远不应命名数据属性并使用相同的名称。参见：https://forum.vuejs.org/t/questions-regarding-handling-immutable-props-and-mutable-data-props/967/2?u=tarasovych

所以现在我们的代码看起来像

Vue.component('stage-execs', {
    delimiters: [ '[[', ']]' ],
    props: ['job_execs'],        
    template: `
    <ul id="example-1">
      <li v-for="item in job_execs">
        [[ item.build_id ]]
      </li>
    </ul>
    `,
});

自从我向道具传递了一个值。我现在可以遍历它。

我在Codepen上做了一个可行的示例：https://codepen.io/bergur/pen/eaPdyv

在该示例中，我只是为数组手动输入了一些虚拟值。

Answer 2

删除此部分：

data: function() {
     return {
         job_execs: job_execs
     }
}

并使用以下命令更新模板：

<ul id="example-1">
    <li v-for="item in this.job_execs">
        {{ item.build_id }}
    </li>
</ul>

为什么我无法从组件模板中的vue根访问道具？

2 个答案: