vue 全局组件component 获取props值

Posted 2023-04-04

参考技术A 关键点：通过: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));

vue组件

一、全局组件

　　全局组件在注册之后可以在项目的任何模板中使用

　　全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

　　注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。一般是在main.js注册

//注册全局组件
Vue.component(‘myComponent‘, 
  props:[‘name‘,‘age‘],//这里可以写使用组件时传入的值
  template: ‘<div>msg,我是一个全局组件,我叫name,我今年age</div>‘,
  data() 
    return 
      msg: ‘hello world!‘ //这里可以写组件自定义的数据
    
  
)

 

//使用全局组件  可以传值
<myComponent name="lisa" age="23"></myComponent>

 

二、局部组件

　//局部组件注册，写在实例的components中

　components: 
      ‘my-component‘: 
        props:[‘name‘,‘age‘],
        template: `<div>msg,这是一个局部的自定义组件，只能在当前Vue实例中使用,我叫name，我今年age</div>`,
        data() 
          return 
            msg:‘hi‘
          
        
      
    

//局部组件使用  可以传值
<my-component name="luna" age="34"></my-component>