vue 组件间传参

(一)跳转参数传递
        -标签式参数传递 (传递参数)
        <router-link  :to="'组件名称?id='+item.id">
          新闻 1
        <router-link>
        this.$route.query.id;              (接收参数)
        this.$route.query.age;             在created()
        #在vue 接收参数统一使用 this.$route
        #编译跳到某个组件       this.$router
       任务:HomeContainer.vue 点击 “新闻资讯”按钮
           跳转 NewsList.vue
       -编程式跳转参数传递
         this.$router.push("组件名称");
         this.$router.push("组件名称?id="+id)
         this.$router.push("组件名称/19")
       注意:使用/传递参数
         -this.$router.push("/home/shop/19")
         -router.js {path:"/home/shop/:id"...}
         -获取参数 this.$route.params.id

       示例 :this.$router.push("/home/newlist")
       创建空组件 ShopContainer.vue 商品组件
       位置 /tabbar/ShopContainer.vue
       访问 /home/shop
    
    小结:
     (1)跳转组件二种方式:标签;编程
       编程更为灵活
     (2)参数:查询字符串?id=10   参数 /19
       第一种常见查询字符中
       第二种参数稍少一些
     (3) @click.stop.prevent="jumpShop()"
       -stop     停止事件冒泡
       -prevent  停止事件默认行为 a;submit;button

(二)父组件传递:
      父组件传递参数子组件,参数名称id
      <comment-box  :id="this.id"></comment-box>
    -子组件接收:
     props:["id"]

子组件的创建:

  子组件是其它组件中组成部分,子组件不用配置路由地址
    -创建空子组件(评论子组件)
     components/sub/comment.vue
    -在父组件加载子组件
     (1)引入子组件
      import comment from "../sub/comment.vue"
     (2)注册子组件并且给组件起一个标签名
      components:{
           "comment-box": comment
       }
     (3)在模块使用标签名调用子组件
       <comment-box></comment-box>

posted @ 2018-11-15 16:01  lianer3588  阅读(148)  评论(0编辑  收藏  举报