Vue组件传递数据的六种方式

1.父组件给子组件传参

(1).在父组件模板里面找到子组件标签

(2). 在子组件标签上面通过 v-bind:自定义属性名="父组件的变量"

(3) 在子组件的export default对象里面 定义 props接收绑定过来的属性

 

接收方式有两种:

1. props:["自定义属性名1","自定义属性名2"...]

这里面的属性名 就是 子组件标签上面通过v-bind绑定的自定义属性

props注册的名字 就可以直接当做data里面的一个变量 在页面直接使用

2.props:{

自定义属性名1:该属性的构造函数名字(如果是基本数据类型 则写对应的包装类型)

}

注意点:

父组件给子组件传参是单向数据绑定 父组件数据变 子组件跟着变化

但是子组件接收到的变量 不能修改值一旦修改就报错

 

2.子组件给父组件传递参数

子组件要想给父组件传参 那么必须受事件驱动

1.在子组件的事件驱动函数里面

2.通过子组件对象 调用$emit方法

this.$emit("自定义事件名称",要传的数据1,要传的数据2...)

3.在父组件模板中 找到子组件标签

4.通过 v-on/@ 绑定$emit方法的第一个参数的事件名称

5.该事件等于一个父组件的一个驱动函数(在methods里面定义)

6.事件驱动函数的参数就是传递过来的数据

(如果参数是一个对象 在父组件里面改这个对象属性的值 子组件同样改变)

 

3.父组件直接调用子组件的方法

1.在父组件模板中找到子组件标签

2.在子组件标签上面 定义 ref属性 值自定义

3.在父组件的代码中 通过父组件对象(this).$refs.自定义的名字.子组件的方法来调用

<Child ref="child"></Child>

show(){
this.msg=this.$refs.child.getData()
}

4.发布者和订阅者 eventbus事件总线 传参

vue实例对象有关于发布者和订阅者模式的方法:

所谓的发布者值的是: 事件的发起人 并且传入指定数据

订阅者是值 绑定这个事件的那些人 可以接收到发布者发布的数据

 

一个发布者可以对应 多个订阅者

 

vue实例关于发布订阅模式的方法:

$emit()发布事件(事件触发)

$on()订阅事件(事件绑定)

$once() 只订阅一次

$off() 取消订阅(事件解绑)

 

为了能够实现组件间数据传递(使用发布订阅模式)

我们选择使用一个空的vue对象

 

步骤:

1 在store文件里面 定义index.js(其他名字 bus.js)

2. 在js里面 引入vue模块 默认对外导出 new Vue();

3.哪一个组件想要使用这个对象 就引入即可

通过 空的vue对象 调用 $on("自定义事件名称",事件驱动函数) 绑定事件

通过 空的vue对象 调用 $emit("自定义事件名称",传递的参数...) 发布事件

$on必须在 $emit之前执行

 

5.Vuex (状态管理仓库)

五大模块:

1.state 定义数据变量

2.mutations 针对store数据变量的更改方法

3.getters 定义各种计算属性

    mapGetters

4.actions 针对计算属性数据变化的方法

  mapActions

  actions里面可以定义异步操作的方法

5.modules

定义数据管理模块 把数据的增删改查封装到单独模块里面

针对上面四个模块的 模块化封装

 

使用步骤:

1.下载依赖 yarn/npm add/install vuex --save

2.在src文件夹下面定义store文件 创建index.js

3.在index.js里面 引入vue模块 引入vuex模块

4.创建vuex实例 并配置五大模块的功能

5.最后对外导出vuex实例

6.在main.js引入vuex实例 并注册到vue实例里面去

7.全局可以使用this.$store访问vuex实例

 

全局获取state数据:

this.$store.state.变量

 

修改state里面变量的数据

this.$store.commit("mutations的一个方法名",传入的修改参数)

必须在mutations里面定义修改方法 对state变量进行操作

不推荐直接操作state变量数据

 

优点:

vuex里面的数据全局都可以访问

 

缺点:

vuex的数据一旦页面刷新就会回归默认值

如果state里面的变量不是提前定义好的 而是后期动态绑定的

那么页面刷新 这个属性就会消失 除非重新绑定

 

如何处理数据刷新会丢失呢?

 

Vuex需要结合session进行使用处理数据刷新丢失问题:

配置页面刷新前事件 然后把vuex数据存储到session里面一份

然后页面刷新完成后 再把数据拿出来 放到vuex里面去

  created(){

      //页面刷新完成后执行的代码
      let per=sessionStorage.getItem("per");
      if(per) this.$store.commit("setNewPer",JSON.parse(per));


      //在session里面不管有没有这个数据 现在都应该删除了
      sessionStorage.removeItem("per");



      //页面刷新之前执行的事件
      window.addEventListener("beforeunload",()=>{
      //  把vuex数据存储一份到session里面去
          sessionStorage.setItem("per",JSON.stringify(this.$store.state.per))

      })
    }

 

6.路由传参有两种方式:

  1.  push/replace({
            path:"/路由路径",
            query:{
              键值对
            }

      })

      获取方式:
        this.$route.query获取

   2. push/replace({
        name:"路由配置时的name值",
        params:{
          键值对
        }

   })

   获取方式:
    (1).this.$route.params获取
    
    (2).组件中也可以用props来进行接受参数，
        在路由配置中设置props为true:
        然后在组件中设置props来接收这个参数 props:["name","age"]

区别:

1. path+query的方式传递过去的参数 会在地址栏体现出来

刷新数据还在

name+params的方式传递过去的参数 地址栏没有

刷新数据会丢失 (可以自己想办法保存数据)

2.使用params传参只能由name引入路由，如果写成path 参数会显示undefined。

3.使用query传参的话可以使用path也可以使用name引入路由，不过建议使用path引入路由。