好资源导航 » 文章资讯 » vue组件传值的实现方式小结【三种方式】

vue组件传值的实现方式小结【三种方式】

2023-08-02 04:32:03 86

本文实例讲述了vue组件传值的实现方式。分享给大家供大家参考，具体如下：

前言

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

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

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

下面我们就开始用代码（一言不合就上代码）详细的介绍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的第二个参数，该值将作为实参传给响应自定义事件的方法
在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听

3、非父子

vue中没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件

如果一定需要子对子传参，可以先从传到父组件，再传到子组件（相当于一个公共bus文件）

为了便于开发，vue推出了一个状态管理工具vuex，可以很方便实现组件之间的参数传递

希望本文所述对大家vue.js程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue组件传值的实现方式小结【三种方式】

前言

1、父传子

2、子传父

3、非父子

热门推荐

随机推荐