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>