vue的组件通信，父子/子孙组件传参和方法调用

随着代码量的提示，肯定是要把弹框、上传等一些公用的表单封装成组件的
1-1.父传子
:seldata="SiteList"为父传子，seldata子组件接收的值，SiteList为父组件传给子组件的值

//父组件引用并注册组件
<addDialog ref="addJob"  @submit="setName" :seldata="SiteList"></addDialog>

js

//子组件，下面是几种接收方法，因为这里传的是数组用：
props: ['seldata'],或 seldata: {type: Array,}一种即可
<script>
  export default {
  //数组
    props: ['seldata'],
  //对象
	props:{ title:'' }
  //自定义类型
    props: {//接收的值可以是：Array,String，Object，Boolean，以及可以设置接受的default默认值 和 required必填校验
	    seldata: {
	      type: Array,
	      required: false,
	      default: []
	    },
	    title: {
	      type: String,
	      default: ''
	    }
	    item: {
	      type: Object,
	      required: true
	    },
	    Flag: {
	      type: Boolean,
	      default: false
	    },
	},
    data() {}
  }
</script> 

1-2.子传父
@submit=“setName” 是子传父
例如：提交表单时，把提交的内容formData传给父组件，
submit就是传给父组件的参数名称。

//子组件
<script>
  export default {
    methods:{
      submitForm() {
        this.$emit('submit', this.formData)
      },
    }
  }
</script> 
//父组件 在方法setName中val接受即可
setName(val){//赋值
	this.SitetList = val
},

2.兄弟传参(EventBus)
个人不建议使用 this.$bus.$on，使用不当会存在接不到值，未销毁等bug，反正我刚开始用的时候就是

首先在main.js挂载下：

Vue.prototype.$bus = new Vue()

这里是全局挂载，所以使用时用this.$bus,也可以单页面引入，直接bus.$emit 使用的

this.$emit用来传值，this.$bus.$on用来接受，this.$bus.$off用来销毁
this.$bus.$emit('refresh',this.refresh)
this.$bus.$on('refresh',val=>{ 
    console.log(val,'val,接受的值')
})
//防止重复执行情况，使用Bus.$on后，需要在生命周期beforeDestroy中销毁
beforeDestroy(){
	this.$bus.$off("refresh")
}

3.父子组件、子孙组件方法互相调用：

父调用子组件方法：

父组件代码：这里以新增弹框为例：可通过this.$refs调用子组件方法
<Dialog  ref="carsAdd"  @getData="getData"/> 
this.$refs.carsAdd.openAdd()

子调用父组件方法：

子组件代码：子调父代码：
this.$parent.getList(flag);

子孙组件方法：
父调子孙组件，可通过this.$refs.Goods.$refs.GoodsItem这种形式
子调parent的父组件同理：this.$parent.$refs.second

this.$refs.Goods.$refs.GoodsItem.tablebt();
this.$parent.$refs.second.codeFirstNum();

4.this.$refs的使用

除此之外this.$refs还可以这样使用：

 <el-table ref="multipleTable" ></el-table>
 js
 // 清空跨页多选时，可通过this.$refs调用
clearSelection() {
  if (this.$refs.multipleTable) {
    this.$refs.multipleTable.clearSelection();
  }
},

对跨页多选有兴趣的可以点击看下

5.其他传参方法：
下面这个博客除了上述父子、兄弟、$parent；还有隔代传参和vuex传参，也不错，感兴趣的可以看一下：

http://events.jianshu.io/p/434499855011

6.Vue中provide和inject 用法
除了上述方法，provide和inject也是用于父组件向子孙组件传递数据常用的方法。
比如我父组件，向子孙组件传个数组：

let options= [
	{value: '01', label: '钢筋'},
	{value: '02', label: '水泥'},
]
export default {
	data: () => ({
	}),
	provide: {
		options,
	},
}

子孙组件接值：

当有的页面使用 provide 提供了依赖，有的没有提供依赖，控制台报错：Injection "xx"not found，用第二种加默认值就可以了。
//inject: ['options'],
inject: {//解决Injection "xx"not found问题。
	options:{value:"options",default:null},
},
data: () => ({
}),	

7.$attrs和$listeners的使用

• $attrs是用来将数据从爷组件传递给孙组件的。
• $listeners是用来从孙组件中触发爷组件中事件的。
  有空再更新