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

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

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

//子组件，下面是几种接收方法，因为这里传的是数组用：
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是用来从孙组件中触发爷组件中事件的。
有空再更新

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

微信小程序组件与页面的传参、方法调用（二）
微信小程序组件与页面的传参.方法调用使用小程序组件时经常不会只用到静态页面显示,需要一定的交互.这时候就需要知道这么传参与方法调用的了首先先放官方的文档,介绍的还是比较清楚详细,有能力的同学请直 ...
vue组件通信案例练习（包含：父子组件通信及平行组件通信）
文章目录一.案例概述二.代码准备工作: 案例1.1:父组件向子组件传值(或者叫:子组件使用父组件属性),采用v-bind方式实现案例1.2:子组件向父组件传值(或者叫:子组件调用父组件方法), ...
vue3之组件通信（props父传子，子传孙）（ts定义数组类型）
目录 vue3之组件通信 1 props父传子,子传孙 1-1 父组件 1-2 子组件 1-3 孙组件 2:父子传值 2:-1 父组件向子组件传值 Props 2-2 子组件向父组件传值 emit 3 ...
vue+filter过滤器（多参数）传参 - 代码篇
vue+filter过滤器(多参数)传参 - 代码篇传1个参数 //html {{a1 | filterAa}} //js filters:{filterAa(a1){// a1是传入的参数} } ...
Vue--Router--路由传参的方法
原文网址:Vue--Router--路由传参的方法_IT利刃出鞘的博客-CSDN博客简介说明本文介绍Vue Router路由传参的方式. router-link标签和this.$router.p ...
通过URL在前端页面传参的方法
通过URL在前端页面传参的方法整个过程实例在HTML页面a.html中:参数写入URL function detail(goods_id){window.location.href="h ...
vue3组件通信的方式父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
vue父子组件通信，兄弟组件通信
目录一.父子组件通信 1.子组件通过 props 获取父组件变量和父组件调用子组件中的方法(这两个都是父传子的思想) a:子组件通过 props 获取父组件变量 b:父组件调用子组件中的方法 2.父 ...
vue组件通信1：父传子（props）
一,前言 1.props用于父子组件的通信. 2.props具有单向下行绑定,由父组件传递给子组件. 二,子组件props声明 1.props是Vue Option Api的一个选项,声明该组件接受父 ...

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

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

最新文章

热门文章