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 用法
除了上述方法,provideinject也是用于父组件向子孙组件传递数据常用的方法。
比如我父组件,向子孙组件传个数组:

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是用来从孙组件中触发爷组件中事件的。
    有空再更新

你可能感兴趣的:(组件通信,父子传参,父子传参,子孙组件通信,父子组件通信)