Vue 2.0常用传值方式父传子、子传父、非父子组件传值，及$emit,$on问题

最新推荐文章于 2025-03-09 12:59:11 发布

置顶 Yanqingdi

最新推荐文章于 2025-03-09 12:59:11 发布

阅读量1.2k

点赞数 1

分类专栏： vue 文章标签： vue.js

原文链接：https://blog.youkuaiyun.com/lander_xiong/article/details/79018737、https://www.jianshu.com/p/072fb76d5baa、https://blog.youkuaiyun.com/qq_36490598/article/details/104684868

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

标题Vue 2.0常用传值方式父传子、子传父、非父子组件传值，及$emit,$on问题

父传子
子传父
非父子组件传值
emit先于on执行

转载 https://blog.youkuaiyun.com/lander_xiong/article/details/79018737

摘要：在Vue的框架开发的项目过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来。这时必然会产生一些疑问和需求？比如一个组件调用另一个组件作为自己的子组件，那么我们如何进行给子组件进行传值呢？如果是电商网站系统的开发，还会涉及到购物车的选项，这时候就会涉及到非父子组件传值的情况。当然你也可以用Vuex状态管理工具来实现，这部分我们后续会单独介绍。我先给大家介绍Vue开发中常用的三种传值方式。

Vue常用的三种传值方式有：

父传子

子传父

非父子传值

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示
官方文档

1.父组件向子组件进行传值

父组件

v-bind 传值可直接简写为：

无论是否加冒号都是子组件的一个属性，v-bind/: 即意味着动态赋值不加就是静态变量传递数字/bool/数组/对象

传一个静态的prop的值

<blog-post title="My journey with Vue"></blog-post>

传入一个对象的所有属性

如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：
在这里插入图片描述

关于prop内容转载于https://www.jianshu.com/p/072fb76d5baa

向子组件传递属性inputName 绑定的值为name （个人感觉就是给子组件绑了个属性inputName）
在这里插入图片描述

子组件

Prop Html中的特性名是大小写不敏感的，所以浏览器会把所有的大写都解释成小写

在子组件上使用
在这里插入图片描述

？？？不行啊还是名称一样才访问的到回来再试试

组件中使用camelCased（驼峰式）命名，在html中应改为kebab-case（短横线）命名方式。没问题

在这里插入图片描述

子组件使用props来声明获取的数据

props：[message] 可以是数组来接受父组件的数据

Props 也可以是对象，对象允许配置高级的选项，类型的判断，数据的校验，默认值设置

Type 校验数据类型 required 必须要绑定属性必须传值对于不是必须传的值我们可以设置默认值，人为设置数据的校验 validator:function(val){} 来判断也会显示但是会报错
在这里插入图片描述

假如我们传递的不是一个基本数据类型是一个对象那么我们在设置默认值时使用工厂函数（工厂函数及返回一个对象）

在这里插入图片描述
子组件通过props 接受父组件的inputName

单向数据流

所有的prop之间都是形成单向的下行绑定。
父级的v-bind绑定内容的更新会向下流动到子组件，但是反过来就不行。这样式为了从子组件意外的修改父组件的内容。从而导致你的应用数据流难以理解。
另外，每次父级组件发生更新时，子组件中的值每次都会刷新为最新的值。这意味着你不应该在一个子组件中直接改变他的状态prop。最好还是通过父级组件进行修改，这样的一个数据流才是正确的，如果不这样做，vue会发出警告。
在这里插入图片描述