vue-cli4脚手架搭建三

组件传值

<script>
    import LunBo from "./LunBo";

export default {
  name: 'Home',
    components: {LunBo},
    data(){
    return {

      lists:[
        {title:'标题1',color:'#ffbb78'},
        {title:'标题2',color:'#b5cf6b'},
        {title:'标题3',color:'#4169e1'}
      ],
        imgArr:[
            require('../assets/img/gu.png') ,
            require('../assets/img/jian.png') ,
            require('../assets/img/monitor.png')
        ]
    }
  }
}
</script>

 

<LunBo :imgArr="imgArr"></LunBo>

 

组件中props接收值

数组定义方式

props:["imgArr"],
mounted:function () {  //页面加载后，自动执行函数
    this.play();
},
destroyed:function () {
    clearInterval(this.imageTimer);
}

 

对象方式

props:{
  imgArr:{},
},
mounted:function () {  //页面加载后，自动执行函数
    this.play();
},
destroyed:function () {
    clearInterval(this.imageTimer);
}

 

student1:{
  id:1,
    name:'zhangsan',
    age:15
}

 

<label> {{student.id}} -- {{student.name}} -- {{student.age}}</label>

 

props:{
    imgArr:{},
    student: {
        id:Number,
        name:String,
        age:Number
    }
    },