第一步:建立好想要使用的组件negotiateDetail.vue
<template>
<van-cell class="custom-title"
value-class="custom-value"
label-class="custom-label"
:title="title"
:value="content"
:label="label"
:is-link="isLink"
:to="url"
>
</van-cell>
</template>
第二步:建立一个新的index.js文件,然后对该组件进行全局注册,然后暴露出去
import negotiateDetailComponent from './negotiateDetail.vue'
const negotiateDetail = {
install: function (Vue) {
Vue.component('negotiateDetail', negotiateDetailComponent)
}
}
export default negotiateDetail
第三步:在main.js中引用并注册
import negotiateDetail from './components/negotiateDetailComponents/index'// 引入协商详情组件
Vue.use(negotiateDetail)
至此,组件就已经成功完成,然后就可以在你想用的地方引入该组件了
<template>
<div>
<!-- 协商数据循环 -->
<negotiateDetail
v-for="(item,i) in negotiateDetail"
:key="i"
:title=" negotiateDetail[i].title"
:content="negotiateContent[i]"
:label=" negotiateDetail[i].label"
:is-link=" negotiateDetail[i].isLink"
:url=" negotiateDetail[i].url"
/>
</div>
</template>