javascript - vue单文件，数据要怎么传进去？

Question

我想在页面上拿到一个接口数据：vuedata，然后用vue把数据渲染成列表。
不使用单文件的时候，像下面这样用是没问题的。

html

<p id="list">
    <ul>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ul>
</p>

js

let vuedata      = {
    todos: [
        {text: 'Learn JavaScript'},
        {text: 'Learn Vue.js'},
        {text: 'Build Something Awesome'}
    ]
};

let list = new Vue({
    el: '#list',
    data: vuedata
});

然后想把这个功能做成单个vue文件，希望使用的时候传入要绑定的el和data就行了。data不是在vue文件里面获取，是从外部传进去。

html如下

<app></app>

js

let vuedata      = {
    todos: [
        {text: 'Learn JavaScript'},
        {text: 'Learn Vue.js'},
        {text: 'Build Something Awesome'}
    ]
};

import app from './app.vue';
let list = new Vue({
    el: 'body',
    data: vuedata,
    components: { app }  //这里我不确定是不是该这样写
});

app.vue

<style lang="sass">
...
</style>


<template>
    <p id="app">
        <ul>
            <li v-for="todo in todos">
                {{ todo.text }}
            </li>
        </ul>
    </p>
</template>


<script>
    export default {
        props: ['todos']  //获取外部的todos
    }
</script>

不过这样根本不行，DOM里面ul内部是空的，似乎哪一步没做对，数据没传过去。

Answer 1

定义了组件的props，用组件的时候就要传进去

<app :todos="todos"></app>

更新

第一种情况正常是因为在解析<li v-for="todo in todos">{{ todo.text }}</li>时，会从data（也就是vuedata）中去寻找todos这个属性，也就是你let vuedata中定义的。

第二种情况，你将todo变成了component，且需要输入参数（props）todos才能正常渲染。所以你在使用这个组件的时候（<app></app>）需要传入todos数组。和第一种情况相同，这里的<app></app>的作用域也是在data（vuedata）里的的直接属性（todos），所以给component传值就得写成：

<app :todos="todos"></app>

Answer 2

最近刚开始看vue，父子组件传值是个高难度动作，加油