Vue组件通信 加Storage

Vue:

父传子 ： 父组件里 自定义组件名 = ‘要传得变量’ 子组件 props:['变量']

子传父 ： 子组件 一个点击事件 this,$emit('监听名',this.变量)
定义一个空变量 methods方法中 事件名（形参）{this.空变量 = 形参}
父组件中 的子组件标签上 @监听名 = '事件名'

兄弟传参：1.同级目录下创建bus.js文件里面配置 导入导出
2.两边都引入bus.js文件
3.绑定一个点击事件 创建一个变量 事件中写Bus.$emit（'名'，变量） A传
B接
4. mounted生命周期中 Bus.$on('名'，(形参)=>{ this.变量 = 形参})

ref和refs 可用于兄弟传参

路由传参： router.push('/index/变量/变量') router.js :/形参:/形参

$attrs 就是没有在 props 中声明要接收的一些属性 都会传到attrs对象中
$attrs 父传子 

父: <zi name='jj' age="18" gender="20"></zi>   

子: props:['name']  created(){   console.log(this.$attrs)    }       得 { age: "18", gender: "20" }  <sun :$attrs></sun>

孙：created(){   console.log(this.$attrs)

 

$listeners : 可以用于传函数

父：<zi @customEvent = 'customt'></zi>

子： created(){   console.log(this.$listeners)   <sun @$listeners >  </sun>

孙：created(){   this.$emit('customEvent ') }

 

vueX ：
vuex 就是一种状态管理模式，用集中管理的方式来管理组件中的共享状态 •
vuex 的核心是 store，
里面包含五个属性
1.state:数据仓库，放数据的
2.getter:计算属性，它的返回值会被缓存，只有当它的依赖值发生变化才会
被重新计算,主要用来过滤一些数据
3.mutation:就是用来修改 state 中的数据
4.action:专门发送异步 ajax 请求,从服务器端获取数据
5.moudou: 用于模块化

 

cookie 与 webstorage 的区别
存储大小不同 cookie 的存储大小不能超过 4k
webstorage 可以存储 5M 或者更大 • 数据有效期不同
1.sessionStorage 存储的信息在当前窗口关闭前有效
2.localstorage 始终有效，即使窗口被关闭，需要手动清除 移除指定的属性：
localstorage.removeItem('') 移除所有：localstorage.clear()
3.cookie 可以设置过期时间，即使关闭了浏览器。ps:cookie 始终在浏览器和 服务器来回传递