绵阳梓潼网站制作公司

怎么在vue中实现组件传值-创新互联

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

创新互联成都网站建设定制网站制作，是成都网站营销推广公司,为封阳台提供网站建设服务,有成熟的网站定制合作流程，提供网站定制设计服务：原型图制作、网站创意设计、前端HTML5制作、后台程序开发等。成都网站建设热线：13518219792

vue的组件传值分为三种方式：父传子、子传父、非父子组件传值

引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递

父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示：

怎么在vue中实现组件传值

下面我们就开始用代码（一言不合就上代码）详细的介绍vue组件传值的三种方式

1、父传子

子组件的代码：




#container{
  color: red;
  margin-top: 50px;
}

父组件的代码：

父传子的实现方式就是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可

2、子传父

子组件代码：




#container {
 color: red;
 margin-top: 50px;
}

父组件代码：

子传父的实现方式就是用了 this.$emit 来遍历 getData 事件，首先用按钮来触发 setData 事件，在 setData 中 用 this.$emit 来遍历 getData 事件，最后返回 this.msg

总结：

  • 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件

  • 将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法

  • 在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

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


分享名称：怎么在vue中实现组件传值-创新互联
本文来源：http://myzitong.com/article/dgpddo.html

其他资讯