vue插槽怎么传值（vue插槽传参）



学习vue的组件,可能很多人已经了解了组件的创建注册使用,但是随之而来的就是组件之间的通信,父子组件怎么传? 兄弟组件怎么传? 不是父子组件又怎么传?

接下来介绍几种组件之间的传参方式,也是很容易面试被问到的.

父组件传递参数给子组件的时候,可以使用props这个属性

emit是发射的意思,也就是,子组件需要向父组件传递数据使用emit来发射一个自定义事件,在子组件上绑定该自定义事件,同时在父组件上有个对应的事件进行双向绑定事件,直接上代码.

我们可以去vue实例里面的生命周期函数mounted里面打印一下这个 this.$fefs ,看看能打印出什么信息.

可以看大在控制台打印出了两个子组件实例,而且是一数组的方式存储,相当于ref='键名’

取出来的话使用this.$refs.aaa 这样就可以拿到这个组件实例

顾明思议,this.$parent 拿到的就是当前实例组件的父组件,记住是父组件,不是父组件之上的组件,他爸爸的爸爸已经是爷爷了,不是父亲了.而 this. $root 拿到的是根组件,也就是这个根组件实例.

查看$parent的内容

1.建立事件中心

2.使用事件中心发射自定义事件

3.使用事件中心接受数据

我們先來想一个需求,假如子组件中有一组数据,但是想以不同的形式展示在父组件中,处理使用$emit等传参方式,也可以使用作用域插槽.

子组件一

子组件二

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/53877.html