Codepen.io:https://codepen.io/xblack/pen/jXQeWv?editors=1010
HTML部分:
<div id="app">
<ul>
<child-one :one="mydata"></child-one>
<child-two :mydataTwo="mydata"></child-two>
</ul>
</div>
<!-- child one template -->
<script type="text/x-template" id="child-one">
<ul>
LIST ONE
<li v-for="item,i in one"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>
</ul>
</script>
<!-- child two template -->
<script type="text/x-template" id="child-two">
<ul>
LIST TWO
<li v-for="item,i in mydataTwo"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>
</ul>
</script>
JS部分:
Vue.component('child-one',{
template:'#child-one',
props:['one']
});
Vue.component('child-two',{
template:'#child-two',
props:['mydataTwo']
});
let app = new Vue({
el:'#app',
data:{
welcome:'Hello World',
mydata:[]
},
methods:{
getdataApi(){
fetch( "https://jsonplaceholder.typicode.com/users").then(r => r.json()).then( (r) => {
this.mydata = r;
});
}
},
mounted:function(){
this.getdataApi();
}
});
输出:
LIST ONE
0 Leanne Graham Sincere@april.biz
1 Ervin Howell Shanna@melissa.tv
2 Clementine Bauch Nathan@yesenia.net
3 Patricia Lebsack Julianne.OConner@kory.org
4 Chelsey Dietrich Lucio_Hettinger@annie.ca
5 Mrs. Dennis Schulist Karley_Dach@jasper.info
6 Kurtis Weissnat Telly.Hoeger@billy.biz
7 Nicholas Runolfsdottir V Sherwood@rosamond.me
8 Glenna Reichert Chaim_McDermott@dana.io
9 Clementina DuBuque Rey.Padberg@karina.biz
LIST TWO
答案 0 :(得分:4)
那是由于props
:https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case
如果您在组件声明中使用mydataTwo
作为道具,那么您将需要在模板中使用v-bind:mydata-two
,而不是v-bind:mydataTwo
。
代替这样做:
<child-two :mydataTwo="mydata"></child-two>
您应该这样做:
<child-two :mydata-two="mydata"></child-two>
请参见概念验证示例:
Vue.component('child-one',{
template:'#child-one',
props:['one']
});
Vue.component('child-two',{
template:'#child-two',
props:['mydataTwo']
});
let app = new Vue({
el:'#app',
data:{
welcome:'Hello World',
mydata:[]
},
methods:{
getdataApi(){
fetch( "https://jsonplaceholder.typicode.com/users").then(r => r.json()).then( (r) => {
this.mydata = r;
});
}
},
mounted:function(){
this.getdataApi();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<child-one :one="mydata"></child-one>
<!-- Fix: use `mydata-two` instead of `mydataTwo` -->
<child-two :mydata-two="mydata"></child-two>
<!-- /Fix -->
</ul>
</div>
<!-- child one template -->
<script type="text/x-template" id="child-one">
<ul>
LIST ONE
<li v-for="item,i in one"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>
</ul>
</script>
<!-- child two template -->
<script type="text/x-template" id="child-two">
<ul>
LIST TWO
<li v-for="item,i in mydataTwo"> {{i}} {{item.name}} {{item.username.name}} {{item.email}} </li>
</ul>
</script>