vue组件传值总结

1.父组件向子组件传值 props

props属性传值 相当于一个组件里面的一个选项 用来指明通过哪些属性来传值可以是数组也可以是对象
传值形式：
1.可以写成props[‘name’,‘age’]，以数组的形式传值
2.props:{
// 键名：传递的属性名
propA:Number,
// 多种类型
propB:[Number,String],
// 必须类型
propC:{
type:Boolean,
required:true
},
propD:{
type:Number,
// 默认值
default:1000
}
},
3. 把所有要传的内容放到一个对象里面
props:{
pdata: {
type: Object,
default: function () {
return {
user: {},
parentFun:null,
}
}
},
},
声明允许你通过属性的方法传递数据
允许你传递多个属性
prop里面的东西不能改变

父组件

//父组件

这里我在子组件的props里面声明了一个对象pdata，把所有想传的变量和方法都写在里面，这样传值的时候看起来比较规整，不会那么乱，当然也可以不声明这个对象，直接把需要传的值写在pdata里面，注意格式尽量写成
name：
{
type:String,
default:""
}
类似这种，给个属性名，和默认值。

子组件

//子组件

关于子组件修改父组件值：
子组件不能直接修改父元素，如果想要修改父组件的数据，需要先把父组件的数据给子组件的一个变量
在data里面声明一个变量，例如childrenUser，这里把父元素的user赋给childrenUser，然后修改childrenUser，不过要注意的是，修改这个变量，并不会影响到父组件的user，也就是说，props里面的值其实并没有被修改到

子组件传值给父组件 this.$emit

图为初始数据，点击按钮“添加人数”，人数会加1
子组件中：通过this.$emit传值
父组件中：通过 @传值名 接收值

代码奉上：
父组件

父组件中的：
@后面跟传的变量名，然后里面的方法名随便起，主要是用来获取值，这样就可以实时获取参数的变化

子组件

总结：1.外部往内部传值 是通过属性 ；2.内部往外部传值 是通过$emit 向上发射

非父子组件传值 Bus

非父子组件传值 使用中央总线来传，创建一个Vue作为中央总线处理
bus.$on可监听事件
这里我们写一个中央总线Bus.js文件，然后在需要传值和接收值的文件引入Bus就可以了
Bus.js

//Bus.js
import Vue from "vue";
export default new Vue();

A组件
（1）先引入Bus.js
（2）在需要传值的地方写上Bus.$emit(‘name’,数据)

B组件
（1）先引入Bus.js
（2）在需要接收的地方写上Bus.$on(‘name’,(val)=>{ val就是传过来的值 })