美文网首页
vue 全局组件component 获取props值

vue 全局组件component 获取props值

作者: gleeeli | 来源:发表于2020-07-01 17:38 被阅读0次

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

    相关文章

      网友评论

          本文标题:vue 全局组件component 获取props值

          本文链接:https://www.haomeiwen.com/subject/knshqktx.html