[JavaScript知识库]动态传参 ( 路由传参，页面传参 )

1. 组件传参

父传子

<Son 自定义属性=”值（类型obj）”?/>

子组件 通过 props 接收

1. props: [ ‘自定义属性’?]
2. 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状态机也可以。