Vue中的传值方式

参考: https://blog.csdn.net/qq_35430000/article/details/79291287

1.路由传参

　　两页面要有路由跳转,在路由跳转的时候通过query把数据传给B组

this.$router.push({ path: '/conponentsB', query: { id: 123 } })

　　在B组件获取传来的数据

this.$route.query.id

2.通过本地存储传递(sessionStorage,localStorage)

sessionStorage使用需要在浏览器同一会话内,页签或者浏览器关闭都会删除.localStorage存储整个网站数据,无过期时间,直到手动删除.存储的数据为字符串

sessionStorage.setItem('TOKEN', token)

　获取数据

let token= sessionStorage.getItem("TOKEN");

3.父子组件传值

　　a.父组件往子组件传值通过props

父组件传值

　子组件接收

　　b.子组件往父组件传值 $emit

子组件触发传值

父组件接收

　通过父子组件的相互传值,还可以利用父组件的中转,实现兄弟组件传值

4.事件总线 evenBus

　创建.js文件

// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()

　发送数据

接收消息

　　主要使用方法为:

// 发送消息
EventBus.$emit(channel: string, callback(payload1,…))

// 监听接收消息
EventBus.$on(channel: string, callback(payload1,…))

5.状态管理(vuex,pinia)

6.$arrts 和 $listenter

7.inject 和 provide

8.$ref $parent

$ref可用于父组件调用子组件方法,变量

父组件

子组件

　$parent可用于子组件调用父组件方法,变量

父组件

子组件

　9.$attrs inheritAttrs $listenters

{{sonId}}