# 前言虽然`Vue3`出来很久并且非常成熟了，但市面上的`Vue`项目中`Vue2`依然还是占半壁江山的。小弟当年刚入行时接触就是`Vue2`项目，后来`Vue3`流行之后慢慢开始在`Vue3`和`Vue2`项目中反复穿插。因此想通过整合最简单易懂的事例全面总结一下`Vue2`的传参方式。 **顺手带上**[：Vue3的13种传参方式](https://juejin.cn/post/7356817667574284340) **下面先直入主题列出Vue2有哪些传参方式，下面再通过事例一一讲解。** > - `props`--(父传子) > - `$emit`与`v-on` --(子传父) > - `EventBus` --(兄弟传参) > - `.sync`与`update:` --(父子双向) > - `v-model` --(父子双向) > - `ref` > - `$children`与`$parent` > - `$attrs`与`$listeners` --(爷孙双向) > - `provide`与`inject` --(多层传参) > - `Vuex` --(全局) > - `Vue.prototype` --(全局) > - 路由 > - 浏览器缓存 --(全局) > - `window` --(全局) > - `$root` --(顶层) > - `slot`--(父传子) # 一、`props`(父传子) > 思路简述：父组件直接用冒号`:`绑定变量，然后子组件通过`props`接收父组件传过来的内容。 **父组件代码：** 核心代码在第`3`行，直接用`:message="message"`传参。 ``` ``` **子组件代码：** 用`props`接收消息后可以直接使用，如下第`3`行和第`16`行中直接使用 **注意：** `props`有两种接收方法，如下第`9`行注释的就是简写用法，此用法不能设置默认值。 ``` ``` **注意：** 此传参方式是单向的，即子组件接收到父组件的数据后，是不能直接修改`props`接收的数据，否则会直接报错。 # 二、`$emit`与`v-on` (子传父) > 思路简述：子组件通过`$emit`触发父组件的指定方法并且在此方法中携带任意参数，父组件通过在被触发的方法中拿到携带的参数完成子传父。 > > 语法：`$emit（方法名，参数）` **子组件代码：** 核心代码在第`11`行，触发方法并且携带参数。 ``` ``` **父组件代码：** 核心代码在第`3`行触发事件，获取到子组件的传参。 ``` ``` # 三、`EventBus` (兄弟传参) > 思路简述：先创建一个全局的事件总线`Bus`（可以随意命名），并挂载在`Vue.prototype`上。 > > 然后兄弟组件`A`通过`$emit`发送参数，兄弟组件`B`通过`$on`接收参数。 > > - **有两种使用方法，下面分别讲解。** > **方法一：** 直接挂载全局事件总线，全局直接使用不需要额外引入。 * 先在项目的入口文件中（`main.js`或`main.ts`）创建全局事件`Bus`并且挂载在`Vue.prototype`* ``` import Vue from 'vue'; const Bus = new Vue(); Vue.prototype.$Bus = Bus; ``` **兄弟组件`A`代码：** 通过`this.$Bus.$emit（方法名，参数）`发送参数。 ``` ``` **兄弟组件`B`代码：** 通过`this.$Bus.$on（对应$emit的方法，本地方法）`触发本地的方法，从而接收参数。 ``` ``` **注意**：如上第`10-12`行所示，在组件销毁前要在 `beforeDestroy` 生命周期中使用`$off`移除移除`$on`的事件监听器，防止避免内存泄漏影响性能。如下所示 > **方法二：** 不创建全局事件总线，单独开一个文件，哪里需要就哪里引用。 - 创建一个单独文件命名为`Bus.js`(可以自由命名) ``` import Vue from "vue" export default new Vue() ``` **兄弟组件`A`代码：** 先引入`Bus.js`文件，然后通过`Bus.$emit（方法名，参数）`发送参数。 ``` ``` **兄弟组件`B`代码：** 先引入`Bus.js`文件，然后通过`Bus.$on（对应$emit的方法，本地方法）`触发本地的方法，从而接收参数。同样也需要使用`$off`销毁事件监听。 ``` ``` # 四、`.sync`与`update:` (父子双向) > 思路简述：`.sync`其实是一个语法糖，配合子组件用`this.$emit('update:绑定的属性名', 方法)`修改父组件属性，能解决`props`只能单向传递的问题。 **父组件代码：** 核心代码在第3行，比普通的父传子多使用了`.sync`修饰符。 ``` ``` **子组件代码：** 核心代码是第`14`行，通过`this.$emit`同步修改父组件内容。 ``` ``` **注意：** 使用`.sync`修饰符时，`this.$emit`里面总是以 `update:` 开头，后面接要修改的属性名称。 # 五、`v-model` (父子双向) 思路简述：`v-model`最常用于表单，它其实是一个语法糖，并且和上面`.sync`有点类似。`v-model`本质上是`v-bind:value`和`@input`组件效果。通过`v-bind:value`绑定数据父传子，通过`@input`触发对应事件子传父从而实现双向绑定。 **父组件代码：** 直接用`v-model`绑定要传给子组件的参数，当子组件触发 `input` 事件时父组件`myData`会同步更新。 ``` ``` **子组件代码：** 当`input`输入框的内容发生变化时，就会触发 `@input` 事件，然后`this.$emit`同步修改父组件的值。 ``` ``` **注意：** 在子组件当中，必须要定义`model`来指定 `props` 和事件名称(名称默认为 `input`)。 # 六、`ref` **思路讲解：** `ref`主要用来访问子组件的方法和属性，是直接操纵`DOM`的方式。主要用法是在子组件上绑定一个`ref`，然后父组件用`this.$refs`直接访问子组件的方法。 **父组件代码：** 子组件上用`ref="refChild"`绑定一个`ref`，然后用`this.$refs.refChild`获取到子组件实例，能获取到子组件属性和操纵子组件方法。 ``` ``` **子组件代码：** ``` ``` # 七、`$children`与`$parent` **简述：** `$children` 和 `$parent` 是`Vue`用于访问子组件实例和父组件实例的特殊属性。其中`$children`能获取所有子组件实例但不能获取孙子的，而`$parent`获取当前组件的父组件实例。 **父组件代码:** 直接使用`this.$children`即可获取。 **注意：** 获取到的实例可能为空，因此需要判空。并且如果有多个子组件时返回的是一个数组，所以需要通过下标确认对应的子组件数据。 ``` ``` **子组件代码：** 类似地，父组件也是同样用法，但区别是返回的不是数组而且一个对象，能直接使用。 ``` ``` # 八、`$attrs`与`$listeners` (爷孙双向) **简述：** `$attrs`和 `$listeners`相当于是使用在父亲组件上的一个中转站。 `$attrs`用于将`props`外的数据从爷组件传递给孙组件的，而`$listeners`用于从孙组件中触发爷组件中事件达到传参效果。下面把`$attrs`与`$listeners`分开讲解更易于理解。 ### **`$attrs`使用流程代码：** **（1）爷组件代码**：类似父传子，正常用冒号`：`绑定属性传参。 ``` ``` **（2）父组件代码**： `$attrs`作用在父组件，意思是把`props`之外属性全部传递给到孙子。 > 注意：如果这里父组件用`props`接收了`name`属性，那么用`$attrs`无法传递到孙子组件，因为只能传递`props`之外属性。 ``` ``` **（3）孙组件代码**：类似父传子，正常用`popos`接收爷组件传过来的参数。 ``` ``` ### **`$listeners`使用流程代码：** **（1）孙组件代码** 直接`this.$emit`类似子传父 ``` ``` **（2）父组件代码：** `$listeners`作用在父组件。 ``` ``` **（3）爷组件代码：** 类似子传父中的父组件，触发对应孙子组件`this.$emit`中的`my-event`事件接收到参数。 ``` ``` 这里感觉算两种（爷传孙与孙传爷）传参方式了，但由于都是类似中转站效果，所以放一起说比较好理解。 # 九、`provide`与`inject` (多层传参) **简述：** `provide`与`inject`无论多少层组件都能传参。顶层组件通过`provide`传参，下面所有组件都能用`inject`接收，而且子组件也能通过方法给顶层组件传参。 **顶层组件代码：** 核心代码在第`8`行的`provide()`中，可以传递常量、变量和方法。 ``` ``` **子孙组件代码：** 核心代码在第`10`行接收参数，除了能接收顶层参数外，还能通过参考第`13`行的用法，通过顶层给到的方法传参给顶层组件。 ``` ``` # 十、`Vuex` (全局) 有针对性写过对应的文章，可以直接跳转细看：[对比学习vuex和pinia用法](https://juejin.cn/post/7355050145485914149) # 十一、`Vue.prototype` (全局) **简述**：能用`Vue.prototype`把任何属性和方法挂载在`Vue`实例了，让所有`Vue`实例共用。 **(1)挂载属性** 直接往`Vue.prototype`挂载即可 ``` Vue.prototype.$testName = '天天鸭'; ``` **(2)挂载方法** 直接往`Vue.prototype`挂载即可 ``` Vue.prototype.$testMethod = function(val) { console.log(val); }; ``` **调用：** 直接在任何页面用`this`调用 ``` this.$appName; this.$testMethod('参数'); ``` # 十二、浏览器缓存 **简述：** `localStorage` 和`sessionStorage`：主要是浏览器用来持久化存储的方式，但也是`Vue`必用的一种通信方式之一。两者区别如下 > `sessionStorage`临时存储：最大空间`5M`，为每一个数据源维持一个存储区域，但只在浏览器打开期间存在，关闭后数据会不会消失，包括页面重新加载。 > > `localStorage`持久存储：最大空间`5M`，与 `sessionStorage`基本一样，但是哪怕浏览器关闭后，数据依然会一直存在，除非手动删除。具体语法如下： ``` // 存储 sessionStorage.setItem('key', 'value'); localStorage.setItem('key', 'value'); // 获取 let valueFromSessionStorage = sessionStorage.getItem('key'); let valueFromLocalStorage = localStorage.getItem('key'); // 删除 sessionStorage.removeItem('key'); localStorage.removeItem('key'); // 清空所有 sessionStorage.clear(); localStorage.clear(); ``` **注意：** 存储的数据只能是字符串形式，因此如果要存储对象或者数组，则需要使用 `JSON.stringify` 来转换后再存储，读取后用 `JSON.parse`还原。 # 十三、`window` (全局) **简述：** 直接用语法 `window.age = '38'` 定义然后即可`全局`通用(`注意`：此方式是存放在内存刷新会清空)。 **注意**：在 `Vue` 应用中，虽然能直接将属性挂载到 `window` 对象上全局通用，但其实并推荐这样使用，因为`可能出现命名冲突、导致代码难以维护等情况`。 **添加属性和方法**：直接定义，可以是属性也可以是对象 ``` window.Obj = { test: '挂载对象' } window.name = '天天鸭' ``` **使用：** ``` console.log( window.Obj); console.log( window.name); ``` # 十四、路由 **简述：** `Vue`在路由跳转时携带参数其实也很常用的方式，下面汇总一下三种路由传参。 **（1）通过 `params` 传参** 跳转页面用法： ``` this.$router.push({name:"index", params:{id}}) ``` 目标页面接收参数： ``` this.$route.params.id ``` **（2）通过 `query` 传参** 跳转页面用法：有几种方式 ``` this.$router.push({ name:"index", query:{id}}) this.$router.push({ path:"/index", query:{id}}) this.$router.push('/index?name='+obj.name+'&age='+obj.age) ``` 目标页面接收参数： ``` this.$route.query.id ``` **（3）通过动态路由传参** **注意：** 如果用动态路由传参需要对路由进行配置；并且参数会在 `url` 中显示。如下所示，在`path`后面要配置`:name/:age`. ``` { path: '/about/:name/:age' , name: 'About', component() => import('@/views/About.vue') } ``` 跳转页面用法： ``` this.$router.push('/about/'+obj.name+'/'+obj.age) ``` 目标页面接收参数： ``` this.$route.params ``` # 十五、`$root` (顶层) **简述：** 可以通过 `$root` 访问到整个 `Vue` 树的根实例，也就是可以使用 `$root` 来访问全局的属性或者修改全局的属性。 **示例**：在`main.js`文件中定义一个`globalName`属性，可以全局使用。 ``` import App from './App.vue'; import Vue from 'vue'; new Vue({ el: '#app', render: h => h(App), data: { globalName: '天天鸭' } }); ``` 在下层任意组件使用或者修改内容 ``` ``` # 十六、`slot`（父传子） **简述：** 通过插槽也是可以传递参数，这也是很多人忽略的一种方式。父组件可以通过插槽向子组件传递参数，然后子组件拿到参数进行渲染。下面主要讲解具名插槽和默认插槽两种使用方式。 ### （1）具名插槽用法 **子组件代码：** 用`slot`定义一个名叫`header`的插槽。 ``` ``` **父组件代码：** 用`v-slot:header`向子组件的`header`插槽传递内容。这边传递什么那边就会在对应区域显示什么。 ``` ``` ### （2）无参数传递的默认插槽 **子组件代码：** 用`slot`定义插槽时不需要指定`name`名称。 ``` ``` **父组件代码：** 不需要指定插槽名称，只要在组件中间填写内容就会渲染在默认插槽中。 ``` ``` # 小结：创作不易啊，肝了一天半终于写好了。已经尽可能把能想到的传参方式全都写上了，并且用最通俗易懂的方式去写示例。如有哪里写的不对或者有更好的建议欢迎大佬指出啊。

这是插槽的内容