- 组件传参
父传子
<Son 自定义属性=”值(类型obj)” />
子组件 通过 props 接收
- props: [ ‘自定义属性’ ]
- props: {
自定义属性: {
type: Object
default: ()=> {}
}
}
子传父
<Son @子组件传递的函数名=”fn父组件的函数” />
子组件:
this.$emit(“子组件函数名字”,值);
父组件:
fn(data){ data === 子组件传递的值 }
$bus 乱传
Vue.prototype.$bus = new Vue();
组件A: this.$bus.$emit(‘函数名’,值);
组件B: this.$bus.$on(“函数名”,(data)=>{ data === 值 });
Vuex 状态机
2.动态传参 面试必杀!!!!
<router-link to=”/hash?参数1=值1&参数2=值2”></router-link>
query 和 params
方式一: query 传参
this.$router.push({
path: “/hash”,
query: { id: 1 }
})
接收: 当前组件 this.$route.query.xx
方式二: params
先要改造路由 需要添加一个name属性
{
path: "acc-list",
name: "acc-list",
meta: {title: "账号列表"},
component: ()=> import("@/views/layout/acc/AccList.vue")
},
this.$router.push({
name: “acc-list”,
params: { id: 1 }
})
接收: this.$route.params.xx
query 和 params 区别?
Query 在地址栏上,有长度限制,并且不安全
Params 不会携带在地址栏,刷新后数据就没有了。
在对应的场景,你按照项目的需求来选择用哪个!!!! 本地存储同样也可以实现页面与页面之间的传参,$bus也可以,vuex状态机也可以。