目录

1.父组件 ===> 子组件

荔枝：想象一下，父子组件传值，就类似于父亲给儿子东西，父亲给儿子的东西要有名字吧，名字就是属性，父亲给儿子东西，儿子要用手接过来，那"手"就相当于子组件里的props。

(1) 先创建父子组件文件，将子组件引入到父组件中。

(2) 运行到微信开发者后可以看见，引入子组件成功。

 (3) 父子通信，简称 “父传子” ，就好像”父亲给儿子东西“，例如父组件给子组件传递一个值。

2.子组件 ===> 父组件

父传子，其实不是传一个值，而是传一个方法，子组件给父组件传递一个方法，子组件触发这个方法，来达到子组件向父组件传递数据的效果。

(1) 例如：子组件向父组件传递一个data中的数据 money，首先在子组件的data中定义。

（2）父组件中

3.跳转传参

第一种：字符串拼接

第二种：模板字符串（推荐）

4.获取传递的参数

5.跳转传参报错

(1) 当你传递一个数组或对象时，拿到的值是 [object Object]

(2) 跳转传参报错  Error in onLoad hook: "SyntaxError: Unexpected end of JSON input"，是因为穿的数组或对象中包含特殊字符串。

---

1.父组件 ===> 子组件

荔枝：想象一下，父子组件传值，就类似于父亲给儿子东西，父亲给儿子的东西要有名字吧，名字就是属性，父亲给儿子东西，儿子要用手接过来，那"手"就相当于子组件里的props。

(1) 先创建父子组件文件，将子组件引入到父组件中。

 

(2) 运行到微信开发者后可以看见，引入子组件成功。

 

 (3) 父子通信，简称 “父传子” ，就好像”父亲给儿子东西“，例如父组件给子组件传递一个值。

父组件：toSonParams是键，title是传递的值。

<mySon :toSonParams="title"></mySon>

子组件：使用props接收父组件传过来的数据。

1.子组件接收父组件传过来的值，可以有两种写法。

第一种：可以设置默认值和数据类型，避免因为数据类型而造成的错误。

 第二种：这种写法是一个数组的形式，这种不能辨别传递的值类型，不推荐使用。

 

2.子组件 ===> 父组件

父传子，其实不是传一个值，而是传一个方法，子组件给父组件传递一个方法，子组件触发这个方法，来达到子组件向父组件传递数据的效果。

(1) 例如：子组件向父组件传递一个data中的数据 money，首先在子组件的data中定义。

 

（2）父组件中

3.跳转传参

第一种：字符串拼接

（1）传单个值

toUnclePage(){
	uni.navigateTo({
		url:'/pages/index/index?price' + this.price
	})
}

（2）传多个值

toUnclePage(){
	uni.navigateTo({
		url:'/pages/index/index?price=' + this.price + '&name=' + this.name
    })
}

第二种：模板字符串（推荐）

（1）传单个值

uni.navigateTo({
	url:`/pages/index/index?title=${this.title}`
})

（2）传多个值

uni.navigateTo({
	url:`/pages/index/index?title=${this.title}&id=${1}`
})

4.获取传递的参数

（1）使用uni.navigateTo()方法跳转，上述的两种传递方式，都可以在跳转到的页面的onLoad(e){}生命周期接到的参数e中获取传递的参数。

onLoad(e) {
	console.log('传过来的参数',e.title,e.id,JSON.parse(e.obj))
},

5.跳转传参报错

(1) 当你传递一个数组或对象时，拿到的值是 [object Object]

解决：将传递的对象或数组转成JSON字符串格式，在跳转后的页面在转回去即可。

传递
toUnclePage(){
    uni.navigateTo({
	    url:`/pages/index/index?obj=${JSON.stringify(this.obj)}`
    })
}

onload中接收
toUnclePage(){
    uni.navigateTo({
	    url:`/pages/index/index?obj=${JSON.parse(e.obj)}`
    })
}

(2) 跳转传参报错  Error in onLoad hook: "SyntaxError: Unexpected end of JSON input"，是因为穿的数组或对象中包含特殊字符串。

解决：先把数据JSON.stringify转string格式，再使用encodeURIComponent对数据特殊字符进行转换。跳转页面后，使用decodeURIComponent把特殊字符转回来，再使用JSON.parse转成对象格式即可。

传递
toUnclePage(){
    uni.navigateTo({
	    url:`/pages/index/index?obj=${encodeURIComponent(JSON.stringify(this.obj))}`
    })
}

接收
toUnclePage(){
    uni.navigateTo({
	    url:`/pages/index/index?obj=${JSON.parse(decodeURIComponent(e.obj))}`
    })
}