如果我们需要从父的组件传值到子组件可以用props来实现.
首先,这里有两个组件app.vue和myComponent.vue:
<template>
<div id="app">
<app-header></app-header>
<myComponent v-bind:users="users"></myComponent>
<app-footer/>
</div>
</template>
<script>
import myComponent from './components/myComponent'
import header from './components/header'
import footer from './components/footer'
export default {
name: 'App',
components: {
'app-header': header,
'myComponent': myComponent,
'app-footer' : footer
},
data(){
return {
users : ["allen","marry","tom"]
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
data中的users就代表我要传递的数据,这里是一个名字为users数组.我们要把数据传递到myComponent中.
<template>
<div class="myComponent">
<ul>
<li v-for="user in users">
{{user}}
</li>
</ul>
</div>
</template>
<script>
export default
{
name: 'myComponent',
//方式一
// props:["users"],
//方式二
props:{
users:{
type : Array,
required : true
}
}
}
}
</script>
<style scoped>
</style>
这里两种方式拿到父组件传递过来的值:
-
props:["users"]:这种方式直接就能拿到,但不够严谨. -
props:{users:{ type : Array,required : true } },这种方式比较严谨,指明了数据类型以及是否必须,官方文档建议采用这种方式来接收值.
