第一步:建立好想要使用的組件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>