VUE父组件和子组件的传参与赋值

父组件demo如下：

<template>
<div id="content">
    <h>there is a components in here: </h>
    <pgbar :param="barparam"/>
</div>
</template>
<script type="text/javascript">
import pgbar from '@/components/pagebar.vue' //导入组件
export default {
  data(){
      return{
         barparam:[{
            index:'test',
            totalpage:10
        }] // 定义一个变量 类型是Array 给子组件传参
      }
  },
  components:{
      pgbar // registr the components 注册组件
  }
  
}
</script>

子组件如下：

<template>
    <div id="pagebar">
        <ul>
           <li v-for="i in totalpage" :key="i.index" >
                <router-link :to="'/'+index+'?pageno'+'='+i" >{{i}}</router-link>
           </li>
        </ul>
    </div>
</template>

<script type="text/javascript">
export default {
  name:"pgbar", // 定义组件名 与父组件导入的组件名保持一致
  props: {
    param:Array // 定义接收的参数名
  },
  data(){
      return{
          totalpage:this.param[0].totalpage,
          index:this.param[0].index //通过this.propsName来获取接收的参数
    };
  }
}

子组件效果如下：

 完整的分页demo见文章