Vue组件间通信

一、父组件调用子组件的数据和方法

1、$children

通过this.$children.search()访问子组件中定义的属性或方法

2、ref

// 父组件通过ref给子组件做一个标记
<outSide ref="outSide"/>

通过this.$refs.outSide.search()访问子组件中的属性或方法

3、$emit

// 子组件
this.$emit("outSide",data); // data是所需要传递的数据

// 父组件 
<outSide @outSide="outSide"/>

 methods() {
    outSide(val) {
	 console.log(val); // 子组件传递出来的数据
	}
 }

二、子组件访问父组件的数据和方法

1、props 可以是数组或对象，接收来自父组件的数据。(只读 read only)

// 父组件
// 传入一个静态的值：
<InquiryDetails  title="text" />

// 传入一个数字：（即便 `10` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue这是一个 JavaScript 表达式而不是一个字符串。）
<InquiryDetails  :num="10" />

// 传入一个布尔值：
<InquiryDetails  :has-id="true" />

// 传入一个数组：
<InquiryDetails  :arr="[1,2,3,4,5]" />

// 传入一个对象：
// obj: {
// 	 id: 1,
//	 name: 'xiaoming'
// }
<InquiryDetails :obj="obj" />


// 传入一个对象的所有property:
<InquiryDetails v-bind="obj" />

// 等价于：
<InquiryDetails 
  v-bind:id="obj.id"
  v-bind:title="obj.name"
/>



// 子组件
props: { hasId : Boolean }

2、$parent能够访问父组件的属性和方法（同children）

3、provide / inject

// 父组件
// provide（provide是父级组件需要传递给子孙组件的属性/方法。选项有以下几种：）
// 一个对象。
// 返回一个对象的函数。

// 选项一
provide: {
  content: 'hello world'
}

// 选项二
provide(){
  return {
    content: 'hello world'
  }
}



// 子组件
// inject（inject是子孙组件用来接收父级组件属性/方法。选项有以下几种：）
// 一个字符串数组。
// 一个对象，对象的key是本地的绑定名，value是provide定义的名字。
// 一个对象，区分上一种方式是为了设置默认值。对象的key是本地的绑定名，value也是一个对象。该对象有两个键，from（provide定义的名字），default（默认值）。

// 选项一
inject: ['content']

// 选项二
inject: {
  content: 'content'
}

// 选项三
inject: {
  content: {
    from:'content',
    default:'hello world'
  }
}

三、路由传参（params 和 query）

区别：
1.params只能用name来引入路由，query用path/name来引入。

// params
this.$router.push({  
	name: 'home',
    params: { 
    	id: this.id 
    	}
    })
 
// query   
this.$router.push({ 
	path:'./login',  // name: 'home',
    query: { 
    	id: this.id 
    	}
    })

2.params类似于post，query更加类似于我们ajax中get传参，说的再简单一点，前者在浏览器地址栏中不显示参数，后者显示，所以params传值相对安全一些。

3.取值用法类似分别是:

this.$route.params.id 和 this.$route.query.id

4.params传值一刷新就没了，query传值刷新还存在。

四、bus方式

1、创建一个公共的bus.js文件

import Vue from "vue"
export default new Vue();

2、在需要组件通信的组件中都引入该文件

<template>
  <div>
    <div>我是通信组件A</div>
    <el-button @click="changeName">修改姓名</el-button>
  </div>
</template

<script>
import EventBus from "../bus.js" // 局部引用（注意路径是否正确）
// 全局引用 main.js
// import bus from '../bus'
// Vue.prototype.$bus = bus; 
export default{
  data(){
    return{}
  },
  methods:{
    changeName(){
      EventBus.$emit("editName", '点点关注！')
    }
  }
}
</script>

3、另外一个组件中同样引入bus.js文件，通过$on监听事件回调

<template>
  <div>我是通信组件B</div>
</template

<script>
import EventBus  from "../bus.js"
export default{
  data(){
    return{}
  },
  mounted:{
  // 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。
    EventBus.$on('editName',(name)=>{
      console.log(name) // => 点点关注！
    })
  }
}
</script>

五、Vuex 官方文档

六、localStorage和sessionStorage

都是通过setItem(“key”,“value”)设置值。
注意: 这里key和value都是string类型的。如果想要存储json格式，JSON.stringify(data)。

用法类似分别是:

localStorage.setItem("historicalVersion", data);  // 存
localStorage.getItem("historicalVersion");  // 取

区别：
1、localStorage(本地存储): 永久性存储,关闭页面或浏览器localStorage中的数据也不会消失，除非手动删除。

// 可以在实例销毁前手动删除 
beforeDestroy() {
    localStorage.removeItem("historicalVersion");
  }

2、sessionStorage(会话存储):关闭窗口或标签页之后将会删除sessionStorage中的数据。