微信小程序传参、vue路由传参、vue组件传参

… 小程序 …

1.使用路由跳转url带值传值**
传值
wx.navigateTo({
url: ‘…/router/router?id=123’,//传单个值
})
toRouter1: function () {
let a =‘1’,b=‘2’
wx.navigateTo({
url: ‘…/router/router?data1 = ’ + a + ’ & data2=’ + b,//传多个值
})
},
拿值
onLoad: function (options) {
console.log(‘getValue’, options)
}
打印结果如下（to页面）
//getValue {id: “123”}
//getValue {"data1 ": " 1 “, " data2”: “2”}

2.navigator标签传值
<‘navigator url="…/router/router?id=1432&qq=10101525&password=123456">传值</’navigator>
打印结果如下（to页面）
getValue {id: “1432”, qq: “10101525”, password: “123456”}

3.缓存设置传值
传值
toRouter:function(){
wx.setStorage({
key: “userList”,
data: {
‘name’: ‘小黄’,
‘age’:‘16’,
‘high’:‘170cm’
}
})
wx.navigateTo({
url: ‘…/router/router’,
})
},
拿值
onLoad: function (options) {
var userList = wx.getStorageSync(‘userList’);
console.log(‘userList’, userList)
}
打印结果如下（to页面）
//userList {name: “小黄”, age: “16”, high: “170cm”}
4.全局App对象传值
传值
globalData: {
userInfo: null,
test :‘8080’
}
拿值
onLoad: function (options) {
console.log(app.globalData.test)
},
打印结果如下（任何界面）
//8080

5.传值为对象 的时候（数组也一样）
传值
let obj = JSON.stringify(res.data);
wx.navigateTo({
url: “./detail/detail?detail=” + obj
})
拿值
onLoad: function (options) {
let that = this;
let _item = JSON.parse(options.detail);
console.log(’_item:’,_item)
}

…vue路由传值…

1.通过query的方式，路径会显示传递的参数

传参：

<div @click="routerTo()">query传参< /div>
routerTo() {
  this.$router.push({path: '/breakdown/details', query: {id: id}});
}

拿参：
this.$route.query.id

2.通过params的方式，路径不会显示传递的参数

传参：

<div @click="routerTo()">query传参< /div>
routerTo() {
  this.$router.push({
    name: `xiaowang`,
    params: {
      code: '1'，grilfriend:'lili'
    }
  })
}

拿参：
this.$route.params.page

3.通过router-link,跳转
在/src/router/index.js文件里配置路由
{
path:’/login/login/:user’,
component:login,
}
< router-link to="/login/login/xiaowang">

拿参：
this.$route.params.user

…vue组件传值…

分三类：父传子，子传父，兄弟之间，

父传子：

直接在子组件中使用props来接
注意：在父组件引用子组件，并使用v-bind
父组件
< template>
< div class=“box”>
< HelloWorld :num=“number” :content=“obj”></ HelloWorld>
< /div>
< /template>

< script>
import HelloWorld from “@/components/HelloWorld .vue”;

export default {
name: "HelloWorld ",
data() {
return {
obj: {
who: “xiaowang”,
age: 23,
hold: “枕里看书”
},
number: 111,
};
},
components: {
HelloWorld
}
};
< /script>

子组件
< template>
< div class=“main”>
< div>{{ num}}</ div>
< div>{{obj.who}}</ div>
< div>{{obj.hold}}</ div>
< /div>
< /template>

< script>
export default {
name: “HelloWorld”,
props: {
num: number,
content: Object
},
};
< /script>

子向父

通过$.emit
父组件
< template>
< div class=“book”>
< HelloWorld @setValue=“getValue”></ HelloWorld>
< h1>{{value}}</ h1>
< /div>
< /template>

< script>
import HelloWorld from “@/components/HelloWorld.vue”;

export default {
name: "HelloWorld ",
data() {
return {
value:[]
};
},
methods:{
getValue(value){
this.value = value
}
},
components: {
HelloWorld
}
};
< /script>
子组件

< template>
< div class=“main”>
< h1 @click=“change” ref=“h2”>点我吧</ h1>
< /div>
< /template>
< script>
export default {
name: "HelloWorld ",
data(){
return {
val:‘子传值给父’
}
}，
methods:{
change(){
console.log(‘this.val:’,this.val)
this.$emit(‘setValue’,this.val)
this.$refs.h2.setAttribute(‘class’,‘backgroundColor’)
}
}
};
< /script>

< style scoped lang=“scss” type=“text/scss”>
.backgroundColor{background:blue}

< /style>

vuex传值：（常用的登录，购物车等一下数据的存储）

const nav ={
state:{
jzdatalist:’’
},
mutations:{
JZDATA_LIST:(state,hint)=>{
state.jzdatalist = jzdatalist;
}
},
actions:{
JzdataList({commit},jzdatalist){
commit(‘JZDATA_LIST’,jzdatalist)
}
}
}
export default nav

this.$store.dispatch(‘JzdataList’,this.param);

computed:{
…mapGetters([‘jzdatalist’])
}