我要评论前言
先直入主题列出有哪些传参方式，下面再通过事例一一讲解。
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"传参。
<template>
<div>
<child :message="message" />
</div>
</template>
<script>
import child from './child .vue';
export default {
components: {
child
},
data() {
return {
message: '这是父组件传过去的'
};
}
};
</script>子组件代码： 用props接收消息后可以直接使用，如下第3行和第16行中直接使用
注意： props有两种接收方法，如下第9行注释的就是简写用法，此用法不能设置默认值。
<template>
<div>
<p>接收到的消息: {{ message }}</p>
</div>
</template>
<script>
export default {
//props:['message'],
props: {
message: {
type: string,
default: '', // 这里能设置默认值，如果父组件没有传参，默认值会生效
},
},
mounted() {
console.log(this.message);
},
};
</script>注意： 此传参方式是单向的，即子组件接收到父组件的数据后，是不能直接修改props接收的数据，否则会直接报错。
二、$emit与v-on (子传父)
思路简述： 子组件通过$emit触发父组件的指定方法并且在此方法中携带任意参数，父组件通过在被触发的方法中拿到携带的参数完成子传父。
语法：$emit（方法名，参数）
子组件代码：核心代码在第11行，触发方法并且携带参数。
<template>
<div>
<button @click="sendparent">点击发送数据给父组件</button>
</div>
</template>
<script>
export default {
methods: {
sendparent() {
this.$emit('my-event', '这是传递的参数');
},
},
};
</script>父组件代码：核心代码在第3行触发事件，获取到子组件的传参。
<template>
<div>
<child v-on:my-event="childevent" />
// 或者用@简写代替v-on
<child @my-event="childevent" />
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child,
},
methods: {
childevent(item) {
console.log('接收到子组件的传参:', item);
},
},
};
</script>三、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（方法名，参数）发送参数。
<template>
<div>
<button @click="sendsibling">点击发送内容给兄弟组件</button>
</div>
</template>
<script>
export default {
methods: {
sendsibling() {
this.$bus.$emit('my-event', '参数');
},
},
};
</script>兄弟组件b代码：通过this.$bus.$on（对应$emit的方法，本地方法）触发本地的方法，从而接收参数。
<template>
<div> 我是兄弟组件b </div>
</template>
<script>
export default {
created() {
this.$bus.$on('my-event', this.handlemessage);
},
beforedestroy() {
this.$bus.$off('my-event', this.handlemessage);
},
methods: {
handlemessage(message) {
console.log('来自兄弟的参数:', message);
},
},
};
</script>注意： 如上第10-12行所示，在组件销毁前要在 beforedestroy 生命周期中使用$off移除移除$on的事件监听器，防止避免内存泄漏影响性能。如下所示
方法二： 不创建全局事件总线，单独开一个文件，哪里需要就哪里引用。
创建一个单独文件命名为bus.js(可以自由命名)
import vue from "vue" export default new vue()
兄弟组件a代码： 先引入bus.js文件，然后通过bus.$emit（方法名，参数）发送参数。
<template>
<div>
<button @click="sendsibling">点击发送内容给兄弟组件</button>
</div>
</template>
<script>
import bus from './bus.js';
export default {
methods: {
sendsibling() {
bus.$emit('my-event', '参数');
},
},
};
</script>兄弟组件b代码：先引入bus.js文件，然后通过bus.$on（对应$emit的方法，本地方法）触发本地的方法，从而接收参数。同样也需要使用$off销毁事件监听。
<template>
<div> 我是兄弟组件b </div>
</template>
<script>
import bus from './bus.js';
export default {
created() {
bus.$on('my-event', this.handlemessage);
},
beforedestroy() {
bus.$off('my-event', this.handlemessage);
},
methods: {
handlemessage(message) {
console.log('来自兄弟的参数:', message);
},
},
};
</script>四、.sync与update: (父子双向)
思路简述：
.sync其实是一个语法糖， 配合子组件用this.$emit('update:绑定的属性名', 方法)修改父组件属性， 能解决props只能单向传递的问题。
父组件代码：核心代码在第3行，比普通的父传子多使用了.sync修饰符。
<template>
<div>
<chile :myprop.sync="mydata" />
</div>
</template>
<script>
import chile from './chile.vue';
export default {
components: {
chile
},
data() {
return {
mydata: '父组件数据'
};
}
};
</script>子组件代码：核心代码是第14行，通过this.$emit同步修改父组件内容。
<template>
<div>
<button @click="updatedata">点击子修改父传过来的数据</button>
</div>
</template>
<script>
export default {
props: {
myprop: string,
},
methods: {
updatedata() {
this.$emit('update:myprop', 新内容);
},
},
};
</script>注意：使用.sync修饰符时，this.$emit里面总是以update:开头，后面接要修改的属性名称。
五、v-model (父子双向)
思路简述：v-model最常用于表单，它其实是一个语法糖，并且和上面.sync有点类似。v-model本质上是v-bind:value和@input组件效果。通过v-bind:value绑定数据父传子，通过@input触发对应事件子传父从而实现双向绑定。
父组件代码：直接用v-model绑定要传给子组件的参数，当子组件触发input事件时父组件mydata会同步更新。
<template>
<div>
<child v-model="mydata" />
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
},
data() {
return {
mydata: '天天鸭'
};
}
};
</script>子组件代码：当input输入框的内容发生变化时，就会触发@input事件，然后this.$emit同步修改父组件的值
<template>
<div>
<input :value="childdata" @input="handlechange" />
</div>
</template>
<script>
export default {
model: {
prop: 'myprop',
event: 'input'
},
props: {
myprop: string
},
data() {
return {
childdata: this.myprop
};
},
methods: {
handlechange(event) {
this.childdata = event.target.value;
this.$emit('input', this.childdata);
}
}
};
</script>注意：在子组件当中，必须要定义model来指定props和事件名称(名称默认为input)。
六、ref
思路讲解： ref主要用来访问子组件的方法和属性，是直接操纵dom的方式。主要用法是在子组件上绑定一个ref，然后父组件用this.$refs直接访问子组件的方法
父组件代码：子组件上用ref="refchild"绑定一个ref，然后用this.$refs.refchild获取到子组件实例，能获取到子组件属性和操纵子组件方法。
<template>
<div>
<child ref="refchild" />
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child,
},
mounted() {
let childobj = this.$refs.refchild;
console.log(childobj.name); // 直接获取到子组件的属性内容 打印出来：天天鸭
childobj.childmethod('参数'); // 触发子组件的方法
},
};
</script>子组件代码：
<template>
<div></div>
</template>
<script>
export default {
data() {
return {
name: '天天鸭',
};
},
methods: {
childmethod(val) {
console.log(val);
},
},
};
</script>七、$children与$parent
简述： $children 和 $parent 是vue用于访问子组件实例和父组件实例的特殊属性。其中$children能获取所有子组件实例但不能获取孙子的，而$parent获取当前组件的父组件实例。
父组件代码: 直接使用this.$children即可获取。
注意： 获取到的实例可能为空，因此需要判空。并且如果有多个子组件时返回的是一个数组，所以需要通过下标确认对应的子组件数据。
<template>
<div>
<child />
<button @click="getchildmethod">调用子组件方法</button>
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child,
},
methods: {
getchildmethod() {
// 判空，然后用下标获取
if (this.$children.length > 0) {
this.$children[0].childmethod(); // 使用子组件方法
this.$children[0].name; // 使用子组件属性
}
},
},
};
</script>子组件代码： 类似地，父组件也是同样用法，但区别是返回的不是数组而且一个对象，能直接使用。
<template>
<div></div>
</template>
<script>
export default {
mounted(){
this.$parent.parmethod()
this.$parent.name
}
};
</script>八、$attrs与$listeners (爷孙双向)
简述： $attrs和 $listeners相当于是使用在父亲组件上的一个中转站。 $attrs用于将props外的数据从爷组件传递给孙组件的，而$listeners用于从孙组件中触发爷组件中事件达到传参效果。
下面把$attrs与$listeners分开讲解更易于理解。
$attrs使用流程代码：
（1）爷组件代码： 类似父传子，正常用冒号：绑定属性传参。
<grandparent :name=name></grandparent>
（2）父组件代码：$attrs作用在父组件，意思是把props之外属性全部传递给到孙子。
注意：如果这里父组件用
props接收了name属性，那么用$attrs无法传递到孙子组件，因为只能传递props之外属性。
<parent v-bind="$attrs"></parent>
（3）孙组件代码：类似父传子，正常用popos接收爷组件传过来的参数。
<template>
<div> 爷组件传来的：{{ name }} </div>
</template>
<script>
export default {
props: {
name: {
default: string,
},
},
};
</script>$listeners使用流程代码：
（1）孙组件代码 直接this.$emit类似子传父
<template>
<div>
<el-button @click="update">点击孙传爷</el-button>
</div>
</template>
<script>
export default {
methods: {
update() {
this.$emit('my-event', '孙传给爷的数据');
},
},
};
</script>（2）父组件代码：$listeners作用在父组件。
<parent v-bind="$listeners"></parent>
（3）爷组件代码： 类似子传父中的父组件，触发对应孙子组件this.$emit中的my-event事件接收到参数。
<template>
<div>
<parent @my-event="getmyevent" />
</div>
</template>
<script>
import parent from './parent.vue';
export default {
components: {
parent,
},
methods: {
getmyevent(val) {
console.log('爷组件接收到的数据:', val);
},
},
};
</script>这里感觉算两种（爷传孙与孙传爷）传参方式了，但由于都是类似中转站效果，所以放一起说比较好理解。
九、provide与inject (多层传参)
简述： provide与inject无论多少层组件都能传参。顶层组件通过provide传参，下面所有组件都能用inject接收，而且子组件也能通过方法给顶层组件传参。
顶层组件代码： 核心代码在第8行的provide()中，可以传递常量、变量和方法。
<template>
<div> </div>
</template>
<script>
export default {
provide() {
return {
name: '天天鸭',
age: this.age,
mymethod: this.mymethod,
};
},
data() {
return {
age: '18',
};
},
methods: {
mymethod(data) {
console.log('收到来自某个孙子的数据:', data);
},
},
};
</script>子孙组件代码：核心代码在第10行接收参数， 除了能接收顶层参数外，还能通过参考第13行的用法，通过顶层给到的方法传参给顶层组件。
<template>
<div>
<el-button @click="mymethod('我是孙子组件')">我是孙子组件</el-button>
这是顶层传下来的参数： {{ name }}
</div>
</template>
<script>
export default {
inject: ['name', 'age', 'mymethod'],
methods: {
mymethod(data) {
this.mymethod(data); // 传参给顶层祖先组件
},
},
};
</script>十、vuex (全局)
有针对性写过对应的文章，可以直接跳转细看：对比学习vuex和pinia用法
十一、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：主要是浏览器用来持久化存储的，这算是用的不多，但也是必用的一种通信方式。两者区别如下
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 = '18' 定义然后全局通用即可。(此方式是存放在内存刷新会清空)
注意：在 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: '天天鸭'
}
});在下层任意组件使用或者修改内容
<template>
<div>
{{ globalname }}
</div>
</template>
<script>
export default {
mounted() {
this.$root.globalname = '修改数据';
},
};
</script>十六、slot（父传子）
简述： 通过插槽也是可以传递参数，这也是很多人忽略的一种方式。父组件可以通过插槽向子组件传递参数，然后子组件拿到参数进行渲染。
下面主要讲解具名插槽和默认插槽两种使用方式。
（1）具名插槽用法
子组件代码： 用slot定义一个名叫header的插槽。
<template>
<div>
<slot name="header"></slot>
</div>
</template>
<script>
export default {
};
</script>父组件代码：用v-slot:header向子组件的header插槽传递内容。这边传递什么那边就会在对应区域显示什么。
<template>
<div>
<child>
<template v-slot:header>
<h1>这是插槽的内容</h1>
</template>
</child>
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
}
};
</script>（2）无参数传递的默认插槽
子组件代码： 用slot定义插槽时不需要指定name名称。
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
};
</script>父组件代码：不需要指定插槽名称，只要在组件中间填写内容就会渲染在默认插槽中。
<template>
<div>
<child>
<p>默认插槽中的内容。</p>
</child>
</div>
</template>
<script>
import child from './child.vue';
export default {
components: {
child
}
};
</script>总结
vue2中路由传参数方式:props(父传子),$emit与v-on(子传父),eventbus(兄弟传参),.sync与update:(父子双向),v-model(父子双向),ref $children与$parent,$attrs与$listeners(爷孙双向),provide与inject(多层传参),vuex,vue.prototype,路由,浏览器缓存,window,$root,slot(父传子)。
到此这篇关于vue2的16种传参通信方式总结和示例讲解的文章就介绍到这了,更多相关vue2的16种传参通信方式内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论