美文网首页
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值

    关键点:通过:id="getId(info)"将info属性(props)值传递到方法,然后再设置值,网上的wat...

  • 2018-09-22 vue组件

    全局: 局部: 组件中可以写多个component 组件中可以正常使用vue中的指令 props是组件间的桥梁 子...

  • Vue 组件基础

    定义组件 Vue.component props 接受父组件的传值 props也可以接受一个对象 在组件上用v-f...

  • vue.component、vue.extend、vue

    vue.component 注册全局组件 vue.extend 创建组件构造器 vue.component(组件名...

  • 2018-07-26

    vue组件相关练习1、设计组件定义、分类(全局、局部组件)、2、组件传值、父传值给子组件,用props参数接收子传...

  • vue语法基础二-组件

    组件 Vue组件说明注册使用全局组件所有实例都能用全局组件。Vue.component(tagName, opti...

  • 2018-09-22

    1.全局组件: Vue.component('my-component',{ template:` ...

  • Vue学习笔记一 (组件)

    全局组件 使用 Vue.component(tagName,options) 可以注册一个全局组件。组件是全局的,...

  • vue UI组件开发

    1. 新建组件: Vue.component 方法用于注册全局组件,new Vue({ components: {...

  • 02.Vue入门之组件(一)

    1.全局组件 vue注册一个全局组件语法格式如下:Vue.component(tagName, options)t...

网友评论

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

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