vue组件的实例使用

在项目开发中，我们有必要将一些公共模块封装成组件。

例如下图：

看到这个样式，我们一定会想，下面三条数据一定是后台返回给前端一个数组，然后我们遍历出来。

第一种做法: 直接在页面去遍历这个数组，然后把三条数据展示出来。
第二种做法： 封装一个一条数据时候的组件，然后在页面遍历这个组件。

实际开发中我们采用的是第二种方式，哪有人一定会问了，第一种多简单，干嘛用第二种。

理由：

如果一个模块在多个地方展示，而你的这个模块只是写在自己的页面里面，其他地方也需要，这时候就需要重新写这个模块，费时费力。

所以我们先定一个组件，以上面为例：

文件名字： todayHou.vue

<template><div class="today-body"><div class="today-list clearfix"><div class="badge-box fl"><span class="today-badge green" v-if="option.tradeDesc=='出售' || option.tradeDesc=='租购'">售</span><span class="today-badge red"   v-if="option.tradeDesc=='租售' || option.tradeDesc=='租购' ">租</span><span class="today-badge white"  v-if="option.typeDesc">私</span><span class="today-badge white" v-if="option.levelDesc">{{option.levelDesc}}</span><p class="today-time">{{option.followTime}}</p></div><div class="info-box fl"><p class="info-name"><span>{{option.communityName}}</span><span>·{{option.roomNum }}室</span><span>{{option.hallNum }}厅</span><span>{{option.toiletNum }}卫</span><span>{{option.area }}·㎡</span></p></div><div class="price-box fr"><p class="info-price">{{option.salePrice}}<span>万</span></p><p class="info-rent">{{option.rentPrice}}<span>元/月</span></p></div></div></div>
</template><script>
export default {name: "todayHou",props: ['option'],   <!-- 传入的每一项的值  -->data() {return {};}
};
</script><style lang="less"></style>

主页面： home.vue

<!-- 使用组件  -->
<template><div class="home"><Card class="bg-white today"><today-hou  v-for="item in 组件遍历的数组 " v-bind:key="item.你设定的唯一标识"  v-bind:option="item"></today-hou></Card></div>
</template><script>import TodayHou from "./todayHou";     <!-- 引入组件  -->export default {data() {return {}},components: {TodayHou             <!-- 注册组件  -->},created() {  this.组件遍历的数组 = "后台接口返回值";            <!-- 组件传值  -->},methods:{}
};
</script>
<style lang="less">
@import url("./home.less");.none-border{padding:0 !important;
}
</style>

vue组件的实例使用相关推荐

了解前端工程化之组件化——Vue组件
首先我们需要知道什么是组件化开发? 前端工程化包含这么四个方针:模块化.组件化.规范化.自动化具体可以查看:了解前端工程化其中就有我们的组件化 ,它指的就是根据封装这么一个思想概念,将页面上可以重 ...
rails 共享变量_如何将Rails实例变量传递给Vue组件
rails 共享变量 by Gareth Fuller 由Gareth Fuller 如何将Rails实例变量传递给Vue组件 (How to pass Rails instance variable ...
[vue] 在子组件中怎么访问到父组件的实例？
[vue] 在子组件中怎么访问到父组件的实例? 通过this.$parent 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前 ...
[vue] 怎么访问到子组件的实例或者子元素？
[vue] 怎么访问到子组件的实例或者子元素? this.$refs 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起通关前端面试题
[vue] 如何在子组件中访问父组件的实例？
[vue] 如何在子组件中访问父组件的实例? this.$parent拿到父组件实例 this.$children拿到子组件实例(数组) 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, ...
vue vue实例中的data与vue组件中的data()
vue组件就是vue实例,可以被复用. 而在复用时,希望组件中的data应该是相互隔离的. 如果使用 data : {count: 0} 的形式,则复制的该组件会共享data中的数据,所以要使用: d ...
vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...
单例模式设计——Vue单例组件实现实例
前言单例模式,顾名思义就是只有一个实例.在 Vue 中,应用到该设计模式的有 vuex.vue-route 等. 相关的设计模式和实现在网上可以找到很多教程,这里不做赘述. 在系统中,适合单例模式使 ...
Vue—组件实例之$on、$off
目录一.概述二.详解三.拓展一.概述 Vue组件实例上自定义事件的监听.触发和移除. 二.详解知识点1:$on $on本身是一个函数,作用是为组件实例绑定自定义事件,事件由$emit触发.$ ...

vue组件的实例使用

理由：

文件名字： todayHou.vue

主页面： home.vue

vue组件的实例使用相关推荐

最新文章

热门文章