关键点:通过:id="getId(info)"将info属性(props)值传递到方法,然后再设置值,网上的watch方法试了无效,这个方法实测有效
源码如下:
<page v-bind:info="paginationVo" ></page>
// 注册 - 名字不能大写 分页组件<page v-bind:info="paginationVo" ></page>
Vue.component('page', {
// 声明 属性
props: ['info'],
template: '<ul :id="getId(info)" class="c_page"><li v-if="isShowPreBtn"><button v-on:click="btnHandler(-1)">上一页</button></li><li v-if="isShowNextBtn"><button v-on:click="btnHandler(-2)" >下一页</button></li></ul>',
data: function() {
return {
counter: 0,
paginationVo:{},
isShowPreBtn:false,
isShowNextBtn:false,
}
},
mounted() {
console.log("-------mounted:"+JSON.stringify(this.paginationVo));
},
methods: {
getId:function(paginationVo) {
if(this.paginationVo != paginationVo) {
this.paginationVo = paginationVo;
}
console.log("拿到数据:"+JSON.stringify(paginationVo))
return "pageDefaultId"
},
},
});
网友评论