Javascript 将数据从父组件传递到子组件_Javascript_Vue.js_Vue Resource

Javascript 将数据从父组件传递到子组件

javascript vue.js

Javascript 将数据从父组件传递到子组件,javascript,vue.js,vue-resource,Javascript,Vue.js,Vue Resource,我有一个父组件，如下所示 <template> <div class="row"> <mappings mapping-list="{{currentMappings}}"></mappings> </div> </template> <script> import Mappings from './content/Mappings.vue';

我有一个父组件，如下所示

<template>
        <div class="row">
            <mappings mapping-list="{{currentMappings}}"></mappings>
        </div>
</template>

<script>
    import Mappings from './content/Mappings.vue';

    export default {
      data () {
       return {
         currentMappings: Array
       }
      },
      created () {
        this.readData();
      },
      methods: {
        readData () {
            this.$http.get('data/Books.xml').then((response)=> {
                var x2js = new X2JS();
                var jsonObj = x2js.xml_str2json( response.body );
                this.getMappings(jsonObj.WAStatus);
            });
        }, 
        getMappings (jsonObj) {
            this.currentMappings = jsonObj.WSSMappings;
        }
      },
      components: { Mappings }
    };
</script>


从“./content/Mappings.vue”导入映射；
导出默认值{
数据（）{
返回{
当前映射：数组
}
},
创建（）{
这是readData（）；
},
方法：{
读取数据（）{
这是.http.get（'data/Books.xml'）。然后（（response）=>{
var x2js=新的x2js（）；
var jsonObj=x2js.xml\u str2json（response.body）；
this.getMappings（jsonObj.WAStatus）；
});
}, 
getMappings（jsonObj）{
this.currentMappings=jsonObj.WSSMappings；
}
},
组件：{Mappings}
};

和一个子“映射”组件，如下所示

<template>
        <div class="col-lg-4">
            <div class="hpanel stats">
                <div class="panel-body h-200">
                    <div class="stats-title pull-left">
                        <h3>Mappings</h3>
                    </div>
                    <div class="stats-icon pull-right">
                        <img src="images/mappings.png" class="browserLogo">

                    </div>
                    <div class="m-t-xl">
                        <table class="table table-striped table-hover">
                                <tr v-for="mapping in mappingList ">
                                    <td>name - {{$index}}</td>
                                </tr>
                        </table>
                    </div>
                </div>
                <div class="panel-footer">
                    Current WSS - SA Mappings
                </div>
            </div>
        </div>
</template>
<script>
    export default {
        props: {
            mappingList:Array
        },
        created () {
            console.log(this.mappingList);
            // console.log(this.$parent.mappings);
        }
    }
</script>

<template>
        <div class="row">
            <browser-stats></browser-stats>
        </div>
        <div class="row">
            <mappings :mapping-list="currentMappings"></mappings>
        </div>
</template>

<script>

    import Mappings from './content/Mappings.vue';

    export default {
      data () {
       return {
         currentMappings: []
       }
      },
      created () {
        this.readData();
      },
      methods: {
        readData () {
            this.$http.get('data/WA_Status.xml').then((response)=> {
                var x2js = new X2JS();
                var jsonObj = x2js.xml_str2json( response.body );
                this.getMappings(jsonObj.WAStatus);
            });
        }, 
        getMappings (jsonObj) {
            this.currentMappings = jsonObj.WSSMappings;
         console.log(this.currentMappings.length);
        console.log(JSON.stringify(this.currentMappings));
        }
      },
      components: {  Mappings }
    };
</script>

<template>
        <div class="col-lg-4">
            <div class="hpanel stats">
                <div class="panel-body h-200">
                    <div class="stats-title pull-left">
                        <h3>Mappings</h3>
                    </div>
                    <div class="stats-icon pull-right">
                        <img src="images/mappings.png" class="browserLogo">

                    </div>
                    <div class="m-t-xl">
                        <table class="table table-striped table-hover">
                                <tr v-for="mapping in mappingList ">
                                    <td>{{mapping._name}}</td>
                                </tr>
                        </table>
                    </div>
                </div>
                <div class="panel-footer">
                    Current WSS - SA Mappings
                </div>
            </div>
        </div>
</template>
<script>
    export default {
        props: {
            mappingList:[]
        }
    }
</script>


映射
名称-{{$index}
当前WSS-SA映射
导出默认值{
道具：{
映射列表：数组
},
创建（）{
console.log（this.mappingList）；
//log（this.$parent.mappings）；
}
}

我无法将数据从父组件传递到子组件。我试着在这里使用道具。我得到的错误是

main.js:2756[Vue warn]: Invalid prop: type check failed for prop "mappingList". Expected Array, got String. (found in component: <mappings>)

main.js:2756[Vue warn]：无效的属性：属性“mappingList”的类型检查失败。应为数组，获取字符串。（在组件中找到：）

更新根据提出的建议，我更新了父组件，如下所示

<template>
        <div class="col-lg-4">
            <div class="hpanel stats">
                <div class="panel-body h-200">
                    <div class="stats-title pull-left">
                        <h3>Mappings</h3>
                    </div>
                    <div class="stats-icon pull-right">
                        <img src="images/mappings.png" class="browserLogo">

                    </div>
                    <div class="m-t-xl">
                        <table class="table table-striped table-hover">
                                <tr v-for="mapping in mappingList ">
                                    <td>name - {{$index}}</td>
                                </tr>
                        </table>
                    </div>
                </div>
                <div class="panel-footer">
                    Current WSS - SA Mappings
                </div>
            </div>
        </div>
</template>
<script>
    export default {
        props: {
            mappingList:Array
        },
        created () {
            console.log(this.mappingList);
            // console.log(this.$parent.mappings);
        }
    }
</script>

<template>
        <div class="row">
            <browser-stats></browser-stats>
        </div>
        <div class="row">
            <mappings :mapping-list="currentMappings"></mappings>
        </div>
</template>

<script>

    import Mappings from './content/Mappings.vue';

    export default {
      data () {
       return {
         currentMappings: []
       }
      },
      created () {
        this.readData();
      },
      methods: {
        readData () {
            this.$http.get('data/WA_Status.xml').then((response)=> {
                var x2js = new X2JS();
                var jsonObj = x2js.xml_str2json( response.body );
                this.getMappings(jsonObj.WAStatus);
            });
        }, 
        getMappings (jsonObj) {
            this.currentMappings = jsonObj.WSSMappings;
         console.log(this.currentMappings.length);
        console.log(JSON.stringify(this.currentMappings));
        }
      },
      components: {  Mappings }
    };
</script>

<template>
        <div class="col-lg-4">
            <div class="hpanel stats">
                <div class="panel-body h-200">
                    <div class="stats-title pull-left">
                        <h3>Mappings</h3>
                    </div>
                    <div class="stats-icon pull-right">
                        <img src="images/mappings.png" class="browserLogo">

                    </div>
                    <div class="m-t-xl">
                        <table class="table table-striped table-hover">
                                <tr v-for="mapping in mappingList ">
                                    <td>{{mapping._name}}</td>
                                </tr>
                        </table>
                    </div>
                </div>
                <div class="panel-footer">
                    Current WSS - SA Mappings
                </div>
            </div>
        </div>
</template>
<script>
    export default {
        props: {
            mappingList:[]
        }
    }
</script>


从“./content/Mappings.vue”导入映射；
导出默认值{
数据（）{
返回{
当前映射：[]
}
},
创建（）{
这是readData（）；
},
方法：{
读取数据（）{
这是.http.get（'data/WA_Status.xml'）。然后（（response）=>{
var x2js=新的x2js（）；
var jsonObj=x2js.xml\u str2json（response.body）；
this.getMappings（jsonObj.WAStatus）；
});
}, 
getMappings（jsonObj）{
this.currentMappings=jsonObj.WSSMappings；
log（this.currentMappings.length）；
log（JSON.stringify（this.currentMappings））；
}
},
组件：{Mappings}
};

和子“映射”组件，如下所示

<template>
        <div class="col-lg-4">
            <div class="hpanel stats">
                <div class="panel-body h-200">
                    <div class="stats-title pull-left">
                        <h3>Mappings</h3>
                    </div>
                    <div class="stats-icon pull-right">
                        <img src="images/mappings.png" class="browserLogo">

                    </div>
                    <div class="m-t-xl">
                        <table class="table table-striped table-hover">
                                <tr v-for="mapping in mappingList ">
                                    <td>name - {{$index}}</td>
                                </tr>
                        </table>
                    </div>
                </div>
                <div class="panel-footer">
                    Current WSS - SA Mappings
                </div>
            </div>
        </div>
</template>
<script>
    export default {
        props: {
            mappingList:Array
        },
        created () {
            console.log(this.mappingList);
            // console.log(this.$parent.mappings);
        }
    }
</script>

<template>
        <div class="row">
            <browser-stats></browser-stats>
        </div>
        <div class="row">
            <mappings :mapping-list="currentMappings"></mappings>
        </div>
</template>

<script>

    import Mappings from './content/Mappings.vue';

    export default {
      data () {
       return {
         currentMappings: []
       }
      },
      created () {
        this.readData();
      },
      methods: {
        readData () {
            this.$http.get('data/WA_Status.xml').then((response)=> {
                var x2js = new X2JS();
                var jsonObj = x2js.xml_str2json( response.body );
                this.getMappings(jsonObj.WAStatus);
            });
        }, 
        getMappings (jsonObj) {
            this.currentMappings = jsonObj.WSSMappings;
         console.log(this.currentMappings.length);
        console.log(JSON.stringify(this.currentMappings));
        }
      },
      components: {  Mappings }
    };
</script>

<template>
        <div class="col-lg-4">
            <div class="hpanel stats">
                <div class="panel-body h-200">
                    <div class="stats-title pull-left">
                        <h3>Mappings</h3>
                    </div>
                    <div class="stats-icon pull-right">
                        <img src="images/mappings.png" class="browserLogo">

                    </div>
                    <div class="m-t-xl">
                        <table class="table table-striped table-hover">
                                <tr v-for="mapping in mappingList ">
                                    <td>{{mapping._name}}</td>
                                </tr>
                        </table>
                    </div>
                </div>
                <div class="panel-footer">
                    Current WSS - SA Mappings
                </div>
            </div>
        </div>
</template>
<script>
    export default {
        props: {
            mappingList:[]
        }
    }
</script>


映射
{{映射。{u name}}
当前WSS-SA映射
导出默认值{
道具：{
映射列表：[]
}
}

但是我得到一个空的映射列表，这意味着每当我执行

console.log（this.currentMappings.length）时我没有定义。。
你能告诉我我做错了什么吗
谢谢
您使用字符串插值（{{}
）尝试将数据传递给prop-但是插值会将数组变成字符串
您应该将绑定与v-bind

<mappings v-bind:mapping-list="currentMappings"></mappings>
...short form:
<mappings :mapping-list="currentMappings"></mappings>


…简称：
使用字符串插值（{{}
）尝试将数据传递给prop，但插值会将数组转换为字符串
您应该将绑定与v-bind

<mappings v-bind:mapping-list="currentMappings"></mappings>
...short form:
<mappings :mapping-list="currentMappings"></mappings>


…简称：
1）首次发行
  data () {
   return {
     currentMappings: Array
   }

<mappings mapping-list="{{currentMappings}}"></mappings>

    created () {
        console.log(this.mappingList);
        // console.log(this.$parent.mappings);
    }

应该是
  data () {
   return {
     currentMappings: []
   }

2）第二期
  data () {
   return {
     currentMappings: Array
   }

<mappings mapping-list="{{currentMappings}}"></mappings>

    created () {
        console.log(this.mappingList);
        // console.log(this.$parent.mappings);
    }

这将每次返回空数组。因为mappingList
是通过AJAX更改的，并且是在调用created（）
之后发生的。尝试使用以获得更好的调试体验
更新：
为了能够观察异步变化（如用AJAX制作），考虑使用<代码>监视<代码>：
{
   data(){ 
      //..
   },
   watch:{
      'currentMappings'(val){
          console.log('currentMappings updated', currentMappings);
      }
   }
}

文档是。
1）第一期
  data () {
   return {
     currentMappings: Array
   }

<mappings mapping-list="{{currentMappings}}"></mappings>

    created () {
        console.log(this.mappingList);
        // console.log(this.$parent.mappings);
    }

应该是
  data () {
   return {
     currentMappings: []
   }

2）第二期
  data () {
   return {
     currentMappings: Array
   }

<mappings mapping-list="{{currentMappings}}"></mappings>

    created () {
        console.log(this.mappingList);
        // console.log(this.$parent.mappings);
    }

这将每次返回空数组。因为mappingList
是通过AJAX更改的，并且是在调用created（）
之后发生的。尝试使用以获得更好的调试体验
更新：
为了能够观察异步变化（如用AJAX制作），考虑使用<代码>监视<代码>：
{
   data(){ 
      //..
   },
   watch:{
      'currentMappings'(val){
          console.log('currentMappings updated', currentMappings);
      }
   }
}

文档是。
是的，我遇到了相同的问题（空数组）。。你能建议我应该做些什么来克服这个问题吗？我让它工作了，我已经把你的答案标记为正确答案-谢谢，我遇到了同样的问题（空数组）。。你能建议我应该做些什么来克服这个问题吗？我让它工作了，我已经把你的答案标记为正确答案-谢谢。我已经因为你更新的问题更改了我的答案。我已经因为你更新的问题更改了我的答案。