zoukankan      html  css  js  c++  java
  • 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>

    想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.
  • 相关阅读:
    成功的软件开发过程 迭代,进化和敏捷
    将动态aspx页面转换成为静态html页面的几种方法
    大社区型网站的架构总结之如何标示用户在使用哪个功能程序篇(草稿)
    如果你觉得能做项目经理,就不要屈就自己去做普通程序员
    软件测试人的职业发展
    软件测试工程师,应该掌握的技能
    内存分配的字节对齐
    约瑟夫问题循环链表
    Linux字符设备驱动结构
    抵制日货(中国人一年购买日本货的钱,足够维持小鬼子2年半的军费)
  • 原文地址:https://www.cnblogs.com/lianer88/p/9964119.html
Copyright © 2011-2022 走看看