父页面
index.vue
<template>
<div class="hello">
<Children :name="name"></Children>
</div>
</template>
<script>
import Children from '你的路径/Children';
export default {
components:{
Children:Children
},
data () {
return {
name:'父页面的数据'
}
},
</script>
子组件
Children.vue
<template>
<div>
<h2>{{name}}</h2>
</div>
</template>
<script>
export default {
data(){
return{
activeName:1
}
},
props:{
name:{
type:String,
default:'我是默认值,可以不定义'
}
}
}
</script>
props 里定义的内容就是父页面传递过来的数据
type 类型可以是String,Number,Array,Object,Boolean
default 默认如果是 Array 或者 Function 必须以 return 的方式定义
例:
options:{
type:Array,
default(){
return [0,1,2,3]
}
}