vue 组件间的传值方法

目录

前言:

1.父向子传递

2.子向父传值

3.ref/sefs(父子组件通信)

4.$parent

5.兄弟组件通信(bus总线)

6.全局变量

7.promise传参

8.vuex


前言:

  我们在熟读 vue.js 官方文档的时候,可以总结很多的知识点,我总结了 8 中方法 如下:

1.父向子传递

  1)、在父组件的子组件标签上绑定一个属性,挂载要传输的变量

 2)、在子组件中通过props来接受数据,props可以是数组也可以是对象,接受数据可以直接使用props:["属性名"] props: {属性名:数据类型}

2.子向父传值

 1)、在父组件的子组件标签自定义一个事件,然后调用需要的方法

 2)、在子组件的方法中通过 this.$emit("事件")来触发在父组件中定义的事件,数据是以参数的形式进行传递的

3.ref/sefs(父子组件通信)

 1)、ref如果在普通的DOM元素上使用,引用指向的就是元素 DOM 元素;如果用在子组件上,引用就指向组件实例,

 2)、可以通过实例直接调用组件的方法或访问数据,也算是子组件向父组件传值的一种

4.$parent

  通过parent可以获父组件实例 ,然 后通过这个实例就可以访问父组件的属 性和方法 ,它还有一个兄弟parent可以获父组件实例,然后通过这个实例就可以访问父组件的属性和方法,它还有一个兄弟parent可以获父组件实例,然后通过这个实例就可以访问父组件的属性和方法,它还有一个兄弟root,可以获取根组件实例。
 

5.兄弟组件通信(bus总线)

 1)、在src中新建一个Bus.js的文件,然后导出一个空的vue实例。 

 2)、在传输数据的一方引入Bus.js 然后通过Bus.e m i t ( “ 事 件 名 ” , " 参 数 " ) 来 来 派 发 事 件 , 数 据 是 以 emit(“事件名”,"参数")来来派发事件,数据是以emit(“事件名”,"参数")来来派发事件,数据是以emit()的参 数形式来传递 ​
 3)、在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on(“事件名”,(data)=>{data是接受的数据})

6.全局变量

 定义一个全局变量,在有值的组件直接赋值,在需要的组件内直接使用就可以了

7.promise传参

 1)、promise 中 resolve 如何传递多个参数

 2)、resolve()只能接受并处理一个参数,多余的参数会被忽略掉。如果想多个用数组,或者对象

8.vuex

 组件通过 dispatch 到 actions,actions 是异步操作,再 actions中通过 commit 到 mutations,mutations 再通过逻辑操作改变 state,从而同步到组件,更新其数据状态

猜你喜欢

转载自blog.csdn.net/w17624003437/article/details/125951882
今日推荐