vue中怎么实现组件间参数传递-创新互联

vue中怎么实现组件间参数传递,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

站在用户的角度思考问题,与客户深入沟通,找到土默特左旗网站设计与土默特左旗网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:成都网站设计、做网站、成都外贸网站建设公司、企业官网、英文网站、手机端网站、网站推广、域名注册、网络空间、企业邮箱。业务覆盖土默特左旗地区。

举例说明

例如:element-ui组件库中使用switch开关,有个属性active-color是设置“打开时”的背景色。change事件是触发状态的事件。




分析代码

我们分析上面的代码

首先我们可以看到active-color是将特定的数据传给组件,也就是父传子组件。

其次是@change虽然监听的是改变事件,但是语法糖依然是$emit,什么emit我们在以后的文章中会讲到,就是“抛出事件”。

这就分为组件的最基本功能:

•数据进
•事件出

那组件的使用我们知道了,通过active-color传入参数,通过@来接收事件。
 所以,我们来探究一下组件的内部结构是什么样的?

我写了一个小模型,是一个显示标题的小按钮,通过div包裹。







 .box{
  width: 250px;
  height: 100px;
  margin: 10px;
  border-radius: 10px;
  background-color: #3a8ee6;
  color: white;
  font-size: 25px;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
 }

使用方法:



分析组件

接收

通过props接收父组件传递过来的数据,通过工厂函数获取一个默认值。

传递

通过this.$emit('ai_click', title)告诉父组件,我要传递一个事件,名字叫“ai_click”,请通过@ai_click接收一下,并且我将title的值返回父组件。

关于vue中怎么实现组件间参数传递问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


分享标题:vue中怎么实现组件间参数传递-创新互联
文章链接:http://myzitong.com/article/dpphpo.html