vue.js - vue一个页面组件复用,数据不同
本文介绍了vue.js - vue一个页面组件复用,数据不同的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
我现在定义了一个父组件如下所示
Vue.component('project',{ //定义父组件,在父组件内部注册子组件
template:'<ul class="projectUl"><project-list v-for="item in items" :item="item"></project-list></ul>',
data:function(){
return {
items:projectArray
}
},
components:{
'project-list':projectList
}
});
子组件不说了,一个页面上想多处用这个父组件,只是数据不用,即projectArray不同,可以通过什么方式复用呢?求大神?我现在的方式是注册了多个父组件,传入不同的projectArray,但是感觉不好。这是我现在的html代码
<div class="timeline js-timeline">
<div data-time="2017" id="project2017">
<project></project>
</div>
<div data-time="2016" id="project2016">
<project1></project1>
</div>
<div data-time="2015" id="project2015">
<project2></project2>
</div>
</div>
解决方案
<project1></project1>
和 <project2></project2>
改成<project></project>
接着使用 Props
传递数据.首先在父组件声明:
props:{
projectArray : Array
}
然后
<div class="timeline js-timeline">
<div data-time="2017" id="project2017">
<project :project-array ='projectArray1'></project>
</div>
<div data-time="2016" id="project2016">
<project :project-array='projectArray2'></project>
</div>
<div data-time="2015" id="project2015">
<project :project-array='projectArray3'></project>
</div>
</div>
projectArray1
.projectArray2
.projectArray3
动态的传入数据到父组件
这应该就是题主所说的 复用 父组件把
这篇关于vue.js - vue一个页面组件复用,数据不同的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文