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;  //会报错的

猜你喜欢

转载自blog.csdn.net/weixin_41472431/article/details/89434632