vue 全局组件component 获取props值

2020-07-01  本文已影响0人  gleeeli

关键点:通过: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"
        },
    },
});
上一篇 下一篇

猜你喜欢

热点阅读