其他分享
首页 > 其他分享> > vue-cli4脚手架搭建三

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
    }
    },

 

标签:function,cli4,vue,name,color,student,props,脚手架,imgArr
来源: https://www.cnblogs.com/perfei/p/13339170.html