我想在页面上拿到一个接口数据:vuedata,然后用vue把数据渲染成列表。
不使用单文件的时候,像下面这样用是没问题的。
html
<div id="list">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
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>
<div id="app">
<ul>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: ['todos'] //获取外部的todos
}
</script>
不过这样根本不行,DOM里面ul内部是空的,似乎哪一步没做对,数据没传过去。
最近刚开始看vue,父子组件传值是个高难度动作,加油
定义了组件的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>