目录

父子传值

子父传值

非父子传值

router路由传参query/params

路由组件方式传值[:xxx]

vuex状态管理工具传值

本地缓存传值 localStorage/sessionStorage

注入的方式传值 provide/inject

 消息订阅与发表pubsub-js

---

父子传值

1. 父组件中的子组件标签上使用 :属性名 的方式来传值
-------------------------------------------
<div id="app">
    <child-component :childItem="childItem">child-component>
div>
 
2. 子组件中的props中接父组件子组件标签的对应属性名
-------------------------------------------
// 字符串形式
props: ['postTitle']
 
// 多类型的props
props: {type: [String,Boolean], default:''}
 
// 默认值形式
props: {
  childItem:{
     type: Object,
     default() {
       return {} 
     }  
  },
  childArr:{
    type:Array,
    default(){
      return []
    }
  },
  childBoolean:{
    type:Boolean,
    default: true
  },
  childStr:{
    type:String,
    default: ''
  },
  childNumber:{
    type:Number,
    default: 0
  },
  childFun:{
    type:Function,
    default(){
      return (x)=>{console.log(x)}
    }
  }
},
 
// 声明传值的数据类型
props: {
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

子父传值

主要知识点：$emit
子组件中：
this.$emit('自定义事件名', 要传的值)
父组件的子组件标签上：
"childItem" @自定义事件名='handleEmit'>
handleEmit(emit){console.log(emit) // 要传的值}

非父子传值

在全局main.js中
const Bus = new Vue()
Vue.prototype.Bus = Bus
 
在同级或者其他关系的组件中：
A组件中传出来值：this.Bus.$emit('自定义事件名',要传的值)
B组件中接收传值：this.Bus.$on('自定义事件名',function(emit){console.log(emit);
// 传过来的值})
 

router路由传参query/params

路由跳转时，采用路由参数去传参：
1. query，即get形式传参，页面路由可以看到参数
this.$router.push/replace({
   path:'/xxx/detail',
   query:{name:xxx,age:xxx}
})
 
detail页面中获取：this.$route.query.name/this.$route.query.age
 
2. params的方式，即post的形式传参，页面路由看不到
注意事项：该传参形式路由router对象中必须要写上对应页面的name名称。否则传值无效
this.$router.push/replace({
   name:'Detail'
   path:'/xxx/detail',  // 此时该路径可写可不写
   params:{name:xxx,age:xxx}
})
 
detail页面中获取：this.$route.params.name/this.$route.params.age
 
// 该形式的写法缺失name，detail组件中无法获取到name/age参数
this.$router.push/replace({
   path:'/xxx/detail',  
   params:{name:xxx,age:xxx}
})
 

路由组件方式传值[:xxx]

这里先说明下，采用:xxx的形式，获取时使用params的形式获取，不能使用query！
 
router.js 配置：
 
{
    path: '/singer/:singer',
    name: 'Singer',
    component: Singer,
    children: [{ path: ':id', component: SingerDetail }]
}
 
vue文件中跳转时：
this.$router.push({
  name: 'Detail',
  path:`/detail/${this.id}`
})
 
detail组件中：获取singer值
this.$route.params.singer  // 2
 

vuex状态管理工具传值

适用场景：
父子组件、兄弟组件、无关系组件任意组件之间的传值
 
vuex的具体配置自行搜索，这里主要说下怎么获取到vuex中的值：
vuex包含四个部分：state、mutations、actions、getters
state:vuex的仓库，即存储数据的地方
mutations：同步方法的对象，直接修改或赋值state中的值
actions：使用异步方法或者间接操作state中的值
getters: 目的就是为了写对应的方法，用来直接获取state中的值
 
vuex中: 
state:{count:1}
var mutations = {
    incCount(){
            ++state.count;
   }
}
//类似于计算属性  state里边的数据改变时候触发的方法。 可以做一些操作 并且可以有返回值
var getters={
      completedCountChange(state){
        return state.count * 2 +'位';
      }
 }
 
//action 类似于 mutation，不同在于： Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作
var actions = {
  asynIncCount(context){  
      //因此你可以调用context.commit来提交一个mutation  使用action需要用dispatch
      context.commit('incCount');
  }
}
 
页面中直接使用vuex中数据：
使用数据： this.$store.state.count
调用方法： this.$store.commit('incCount'); this.$store.dispatch('asynIncCount')

本地缓存传值 localStorage/sessionStorage

localStorage:
1.存储数据：localStorage.setItem(“自定义数据名”, 数据)
2.取存储的本地数据：localStorage.getItem(“存储数据的数据名”)
3.删除指定的本地数据：localStorage.removeItem(“存储数据的数据名”)
4.删除当前域名下所有内容：localStorage.clear()
 
sessionStorage:
1.存储数据：sessionStorage.setItem(“自定义数据名”, 数据)
2.取存储的本地数据：sessionStorage.getItem(“存储数据的数据名”)
3.删除指定的本地数据：sessionStorage.removeItem(“存储数据的数据名”)
4.删除当前域名下所有内容：sessionStorage.clear()

注入的方式传值 provide/inject

形式一：常见的方式
// parent component providing 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}
// child component injecting 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}
 
形式二：ES2015符号函数 提供 和对象 注入 
const s = Symbol()
const Provider = {
  provide () {
    return {
      [s]: 'foo'
    }
  }
}
const Child = {
  inject: { s },
  // ...
}
 
形式三：解决作为props的默认参数值，data中变量的默认值
使用inject的注入值作为默认值:
const Child = {
  inject: ['foo'],
  props: {
    bar: {
      default () {
        return this.foo
      }
    }
  }
}
使用一个注入值作为data数据输入:
const Child = {
  inject: ['foo'],
  data () {
    return {
      bar: this.foo
    }
  }
}
 
形式四：注入的默认值的形式
If it needs to be injected from a property with a different name, use from to denote 
the source property:
 
const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: 'foo'
    }
  }
}
Similar to prop defaults, you need to use a factory function for non primitive 
values:
const Child = {
  inject: {
    foo: {
      from: 'bar',
      default: () => [1, 2, 3]
    }
  }
}

 消息订阅与发表pubsub-js

1.一种组件间通信的方式,适用于任意组件间通信
2.引入: import pubsub from 'pubsub-js'
-------------------------------------------
A组件声明对应的接收函数：参数一就是事件名pubsub,参数二就是执行处理函数
created或mounted中：
  this.token = PubSub.subscribe('pubsub', (event, data) => {
      this.$my_console('测试PubSub：', event, data) //测试PubSub： pubsub hello world!
      this.singerItem = data
  });
同时A组件中做销毁处理：
beforeUnmount(vue3)/beforeDestory(vue2.x)
beforeUnmount() {
    PubSub.unsubscribe(this.token) 
    // 1. 如果只是当前页面相关组件跳转来用，这里尽量写上销毁来优化页面性能
    // 2. 但是如果就一个或者其他非同级的页面切换时删掉，否则切换后会被销毁无法获取对应数据！
}
-------------------------------------------
任意B组件中去传值：参数一就是事件名pubsub,参数二就是入参(参数一事件名和发布时的要一致！！！)
PubSub.publish('pubsub', 'hello world!');
-------------------------------------------
触发时机：当从A组件进入任意关系的B组件中时，只要事件名相同就会触发A组件的中函数
处理B组件传入的参数(任意形式的参数)
使用场景：用于监听进入的组件，或者进入组件是要改变上一个组件的相关值或者展示内容
是否通用：一般情况下不会使用，除非特别需求才会引入项目