父到子组件传值(自定义属性props)
父组件冒号绑定,子组件props接受
![](https://img-blog.csdnimg.cn/img_convert/c78777cee77e4d58b11220435aa9a7c7.png)
![](https://img-blog.csdnimg.cn/img_convert/ba3f25fd646948bd984bad73ac0d02aa.png)
在created中可以获取到num的值,值为1
子到父组件传值(自定义属性$emit)
![](https://img-blog.csdnimg.cn/img_convert/b27a14593e6c4546b7069a3d6758359c.png)
![](https://img-blog.csdnimg.cn/img_convert/3daa3f9ccab74d31aa4e81b98aa757d9.png)
父组件接受值并打印数据:
sonSend(res) {
console.log(res, "-------res-------");
},
![](https://img-blog.csdnimg.cn/img_convert/1c9e11a2159946dba71c8dc1545ddb05.png)
兄弟之间传参,通过bus中间件
![](https://img-blog.csdnimg.cn/img_convert/5881767a2ebe4d01a54fad64aee678a6.png)
main.js注入绑定到原型上,然后页面不用单独在引入了
![](https://img-blog.csdnimg.cn/img_convert/90ec798702ab449c833027161209a935.png)
发送页面:this.$bus.$emit('send',1)
接受页面:this.$bus.$on('send',res=>{
console.log(res,'--res--’)
})
注意:发送接收页面的方法名字要一致
4.父组件点击按钮把值传到子组件,子组件接收。(父组件利用ref绑定)
![](https://img-blog.csdnimg.cn/img_convert/303370e8c0da4221b814ba60c02570f3.png)
![](https://img-blog.csdnimg.cn/img_convert/2892e284366c4592a155d4d7e27d4ca1.png)
![](https://img-blog.csdnimg.cn/img_convert/81d214faf4874e908ce2b69b9d86cd3d.png)
注意:发送接收页面的方法名字要一致
通过vuex共享数据
vuex中的state是修改数据的唯一属性
![](https://img-blog.csdnimg.cn/img_convert/f7ecb31b2ea844ba89ba33af876df09b.png)
![](https://img-blog.csdnimg.cn/img_convert/8ae0b02f29da45d2963ebd43ad91b81d.png)
如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
state:用来存储变量
main.js
import store from './store'
![](https://img-blog.csdnimg.cn/img_convert/4ae5737c1bd7419483b488e07e7ca843.png)