vue 父组件给子组件传值

vue 父组件内容：

<v-pagination ref="vPagination" :totalinfo="total" :current_page="current"

:sizeinfo="size" :pagesinfo="pages"></v-pagination>

v-pagination 为子组件在父组件中定义的组件名称

 

   data(){   
      return{
             total: "", // 记录总条数
             current: "", // 当前的页数
             size: "",
             pages: "",
          }
       }

在 data() 中初始化数据

this.total = body.data.pageInfo.total;

this.current = body.data.pageInfo.current;

this.size = body.data.pageInfo.size;

this.pages = body.data.pageInfo.pages;

在方法中给变量赋值

子组件内容：

props: ["totalinfo", "current_page", "sizeinfo", "pagesinfo"],

接收父组件传来的数据

<p>总多少条数据：{{totalinfo}}；当前页：{{current_page}}；几条一页：{{sizeinfo}};共多少页:{{pagesinfo}}</p>

就可以直接使用了，

注意事项！！！：接收父组件的变量不可以重新赋值

 例如：this.totalinfo=2222;  //会报错的