Vue组件间通信

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

1、$children（不推荐）

this.$children.handleSearchClick(); // 方法
this.$children.userName; // 属性

2、ref

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

this.$refs.childRef.handleSearchClick(); // 方法
this.$refs.childRef.userName; // 属性

3、组件v-model

// 父组件
<my-component v-model="message"></my-component> // message: 'hello' 当子组件输入框值改变时，`message`  的值也会随之更新。

// 子组件
<input :value="value" @input="$emit('input', $event.target.value)" />

props: {
	value: String
},
// 默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event
model: {
	prop: 'value',
	event: 'input'
}

// 但是对于一些输入类型（如单选框或复选框），我们可能需要自定义这些绑定，以便更好地控制组件的行为。
// 举个例子，假设我们有一个自定义的开关组件，希望在使用  `v-model`  时绑定  `checked`  prop  和  `change`  事件，而不是默认的  `value`  prop  和  `input`  事件。这时候，可以在组件定义中添加  `model`  选项来实现：
Vue.component('my-switch', {
  props: {
    checked: {
      type: Boolean,
      default: false
    }
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  template: `
    <label>
      <input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">
      <span class="slider"></span>
    </label>
  `
})

// 父组件
<my-switch v-model="isOn"></my-switch> // isOn: true 当开关状态改变时，`isOn`  的值也会随之更新。

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

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

// 父组件
// 可以传字符串、数组、对象、布尔值、函数
<details  title="text" />


// 传入一个对象的所有property:
<InquiryDetails v-bind="obj" />
// 等价于：
<InquiryDetails 
  v-bind:id="obj.id"
  v-bind:title="obj.name"
/>



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

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

3、$emit（$emit() 是 Vue.js 的实例方法之一，可以在一个子组件中触发一个自定义事件，并向外部传递数据，外部可以使用 v-on 或 @ 添加监听事件。）

// 当子组件中使用 `$emit()` 触发自定义事件时，对应的父组件中的处理函数就会自动被调用，同时 `$emit()` 方法还可以将数据传递到父组件中
this.$emit("handleClick", v); 

// 在父组件中，可以通过使用 `v-on` 或 `@` 添加监听子组件触发的自定义事件。监听时需要指定相应的事件名称，例如 `@customEvent`，并将对应的事件处理函数传递给该自定义事件。
<outSide @handleClick="handleSearchClick"/>

 methods() {
    handleSearchClick(v) {
	 // do something
	}
 }

4、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中的数据。