为什么我无法从组件模板内的 vue 根目录访问道具?

Question

我正在尝试从模板中的阶段执行组件访问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 };
});
},
});

在阶段执行组件中访问job_execs的正确方法是什么？

Answer 1

在 VueJS 中，你总是使用 props 将数据从父组件(在你的例子中是根)传递到组件(stage-execs 组件)。

所以回答你的问题

在阶段执行官中访问job_execs的正确方法是什么 元件？

答案是：有道具。在组件上定义一个属性，并从父组件传递一个值。

在你的组件中，你定义了 props 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=的等价物，是对组件上道具的引用。向下传递的值是根中的数据属性。对不起，如果我是过度的东西，我只是想避免混淆，因为组件上的 prop 和 root 中的数据属性具有相同的名称。

在组件中，无需创建名为 job_execs 的数据属性，实际上，您永远不应该将数据属性和 props 命名为相同的名称。请参阅：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>
`,
});

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

我在代码笔上做了一个工作示例：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>