码迷,mamicode.com
首页 > 其他好文 > 详细

vue-cli4脚手架搭建三

时间:2020-07-19 16:10:52      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:--   number   string   tor   san   inter   strong   pre   def   

组件传值

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

 

vue-cli4脚手架搭建三

标签:--   number   string   tor   san   inter   strong   pre   def   

原文地址:https://www.cnblogs.com/perfei/p/13339170.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!