组件传值 传Function

1.父传子

在父组件中定义自定义属性

在子组件中通过props来接收

props有两种形式

(1).数组形式

props:['自定义的属性','自定义的属性']

(2).对象形式

props：{

属性名：{

type:类型，

requird：是否必穿，

default：默认值，如果没有传递数据则使用默认值

细节：这个属性与required冲突，如果设置了required属性，则必须传递，有默认也失效

validator：（v){ v是父组件的数据

可以对传入的值进行自定义的校验

通过添加一个validator函数进行数据的校验，如果函数返回false,则校验失败，进而报错

return true/false

}}}

props: {
					自定义的属性: {
						type: '',// 验证传来值的数据类型 
						default: 默认值 父组件如果没有传值，
                        就取这个默认值；如果说是一个数组或者对象，需要写成函数形式
						required: true/false // true--必须传的
						validator:function(val){
							return false // 验证失败
							return true // 验证成功
						}
					}
				}

2.子传父

在父组件中子组件的标签上自定义一个事件，在子组件中通过  

this.$emit('自定义一个事件',参数)

3.兄弟组件传值

  利用中央事件总线 eventbus

  1.在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫$bus

Vue.prototype.$bus = new Vue()

  传值： this.$bus.$emit('事件名称',参数)

  接收：声明周期函数(created  mounted) this.$bus.$on('事件名称',(参数)=>{})

4.本地存储

localStorage 数据会永久存储，除非代码或手动删除

sessionStroage 数据只存在于当前会话，浏览器关闭则清空 一般用 localStorage 会更多一些

5.vuex   

 利用 vuex 进行组件通信 把公共的数据存在 vuex 里就可以实现组件之间都能使用这个数据了

6.provide inject

只能传递常量

provide选项是一个对象或返回一个对象的函数，该对象包含可注入子的property

inject选项是一个数组或对象

7.attrs

可以收集父组件中的所有传过来的属性除了那些在组件中没有通过 props 定义的。

8.refs

被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用，引用信息就是元素; 如果用在子组件上，引用信息就是组件实例。

9.$parent和$children

$parent是在子组件中可以直接访问该组件的父实例或组件。

$children是在父组件中可以直接访问子组件的实例，但是不保证子组件的顺序

10.v-model

 v-model也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写 如果在一个子组件上使用 v-model 也能实现父子组件之间的通信