摘要：的单向数据传递直接作为一个本地变量下面是我的子组件这是父组件给我传的数据运行结果如下图子组件向父组件传递数据基本使用子组件向父组件传递数据，不能像上面一样实时的传递数据，必须通过事件触发。
组件是Vue核心功能之一，合理的组件化，可以减少我们代码的冗余，提高项目的可维护性。下面，我将由浅入深的讲Vue的组件
在讲之前，首先我们先了解一下组件的命名。
HTML是对特征名不敏感的语言，他会将所有的字符全部转换成小写。我们命名了一个组件的名称为 nameTest ,然后再其他组件里面引用
Parent.vue
parent：下面是我的子组件
Childs.vue
child:这是父组件给我传的数据——{{userName}}
我们在 Parent.vue 组件里面引用子组件 Childs.vue 然后传入 userName 参数给子组件,Childs 在props里面接收父组件传传来的数据。
上面的例子我们传入的是一个字符串，其实，props可以传入String、Number、Object、Boolen、Array等数据类型。那么我们在接受参数的时候就会有一个问题，我们怎么知道接收的应该是字符串"12"还是数字12呢？
所以 Vue有一个 Prop验证 的功能。
子组件在接受数据的时候，可以指定接收具体类型的数据、是否不能为空，是否有默认值等。
Parent.vue
parent：下面是我的子组件
Child.vue
child:这是父组件给我传的数据——name:{{name}}——firstName:{{firstName}}——lastName:{{lastName}}——age:{{age}}运行结果如下图：
如果我们将条件改变的时候，name 传入一个数组，firstName 不传值，age 传入一个不能转换为数字的值。
运行结果如下图：
Prop传入对象
根据我们的验证规则，name 必须为一个String 类型，所以控制台报错：希望得到一个String,得到了一个数组；firstName 为一个必填的值，但是我们没有传值，所以报错；age要为一个可以转换成数字的值，但是我们穿了"ss"，会经过我们自定义的验证，然后抛错。如果我们要将一个 对象 的所有属性全部传给子组件，我们不需要将属性一个个的作为Prop传递，只需要将整个对象传递过去就可以。
Parent.vue
template>parent：下面是我的子组件Childs.vue
child:这是父组件给我传的数据——name:{{name}}——age:{{age}}运行结果如下图：
Prop的单向数据传递 直接作为一个本地变量
我们传入一个 obj 对象，然后在子组件里面可以拿到对象的所有属性。Parent.vue
parent：下面是我的子组件Childs.vue
child:这是父组件给我传的数据——{{con}}运行结果如下图：
emit :子组件 向 父组件 传递数据 基本使用子组件向父组件传递数据，不能像上面一样实时的传递数据，必须通过 事件 触发。我们通过 $emit 方法来向父子间传递数据，第一个参数为事件的 名称 ，第二个为传递的 数据 ，是一个可选的参数。父组件必须监听同样的事件名称才能监听到我们的这个事件，事件抛出的值必须通过 $event或者通过一个方法来访问。
**Parent.vue
parent：这是我的子组件传给我的值：{{num}}运行结果如下图：
组件间的数据双向绑定
子组件定义了一个num变量，然后点击按钮触发method,通过 $emit向父组件发送事件的名称(getNum)和一个参数(this.num)，然后 父组件 监听事件getNum，然后将传递值赋值给父组件的一个属性上，这样就可以是实现子组件点击一次按钮，就向父组件发送一次数据。更多实例可以参考官网。我们知道我们可以使用v-model来实现数据的双向绑定。但是如果这个数据是跨组件的话，我们要怎样实现绑定吗？
首先我们先要明白v-model的原理。v-model其实是分为两个方面，一方面数据层的改变引起视图层的变化，我们可以使用v-bind来实现，另一方面视图层的变化引起数据层的变化我们可以监听事件来实现。所以我们想要双向绑定一个数据，只需要这两步操作。具体实现参考官网。
弹框嵌套表格组件化使用(待续...)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/101382.html
摘要：本身提供哪几种通信方式首先灵感源于，支持双向绑定，本质还是单向数据流。跟一样，组件间最基本的数据流是通过向子组件传递数据。但是在却很少使用，因为组件可以自定义事件，即后面的组件间通信方式其实就是订阅发布模式。 例子是在 jsrun.net 平台编写，不支持移动端平台，所以本文建议在 PC 端进行阅读。 Vue 是数据驱动的视图框架，那么组件间的数据通信是必然的事情，那么组件间如何进行数...
摘要：整理种组件通信方式重点是梳理了前两个父子组件通信和通信我觉得文档里的说明还是有一些简易我自己第一遍是没看明白。第四种通信方式利用比较复杂可以单独写一篇 整理4种Vue组件通信方式 重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白。 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex...
摘要：首先是父组件里面的数据传递到子组件这里用，有支撑物的意思，可以理解为桥梁。 首先是父组件里面的数据传递到子组件这里用props，props有支撑物的意思，可以理解为桥梁。props要写在自组件里面。 先定义一个子组件，在组件中注册props {{message}}(子组件) export default { props: { ...
阅读 1328·2021-09-04 16:40
阅读 3454·2021-07-28 00:13
阅读 2877·2019-08-30 11:19
阅读 2610·2019-08-29 12:29
阅读 3166·2019-08-29 12:24
阅读 1121·2019-08-26 13:28
阅读 2385·2019-08-26 12:01
阅读 3444·2019-08-26 11:35
