javascript - vue父组件怎么样向子组件传递data

问题描述

问 题

父组件

//向子组件传递父组件data中的items
<ForecastList items='items'></ForecastList>

 data: function () {
            return {
                items: [
                    {message: 'foo' },
                    {message: 'Bar' }
                ]
            };

子组件接收得不到父组件中的items，父组件传递数据格式写错了吗？

    props: ['items'],
    mounted:function(){
      console.log(this.items)
    }

解决方案

<div id="demo">
        <todo-item v-for="item in list" :a="item"></todo-item>
    </div>

Vue.component('todo-item',{
            props: ['a'],
            template: '<div>{{ a.text }}</div>'
        })

var vm = new Vue({
            el: '#demo',
            data: {
                list: [
                    { text: 'Learn JavaScript' },
                    { text: 'Learn Vue' },
                    { text: 'Build something awesome' }
                ]
            }
        })

这篇关于javascript - vue父组件怎么样向子组件传递data的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！