小编给大家分享一下Vue中子组件与数据传递的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
如何传递
父组件向子组件在进行传递时，使用的是 prop 特性进行传递。
约定
老规矩， 在使用前我们首先了解应该怎么使用，有哪些约束条件：
子组件的 props 中定义要传递的变量名
变量名同组件的命名规范
父组件传值时，需要使用 短横线分隔命名
使用 v-bind 进行传值
定义
首先在子组件中定义：
// Child.vue
export default {
name: 'child'
props: ['teamList']
}这里使用了 驼峰命名 ，在传值时需注意要转换成 短横线分隔命名 。
我们定义了一个 teamList 的变量，此时我们就可以在这个组件中通过 this 使用这个变量了（同 data 中的数据）。
传值
在父组件中进行传值：
<template>
<div>
<child v-bind:teamList="teamList"></child>
</div>
</template>父组件中使用 v-bind 即可将数据传递下去了。
向子组件传递数据就是这么简单，本质上和 data 一样，只是这里单独使用 prop 特性将其区分开来。
需要注意的时：
通过 prop 特性传递下去的数组是 “单向”绑定的，父组件对数组的更新会影响到子组件。因此并不建议子组件对 prop 特性中的值进行修改
Js中在传递对象和数组时传递的时引用！因此：当子组件修改父组件传递下来的对象/数组时会影响到父组件中的状态
这个特性有利有弊，在某些情况下可以通过这种类似 hack 的方式来进行处理。
子组件反向传递
上面说到了，并不建议在子组件中修改 props 中的数据。那么当需要向父组件进行某种 反馈 时怎么办呢？
假设现在我们有一个登录弹出框的组件，通过子组件的方式调用了，当我们登录成功时该如何 通知 父组件做出相应的反应呢？
通过自定义事件，子组件调用 this.$emit('事件名', 参数)
使用 v-model 、组件中 model 选项与 input 事件模拟成 input 控件，对父组件中的值进行更新
.sync 修饰符进行 “双向绑定”
这里只介绍第一种方式，因为后两种方式若羽也没用过几次 o(╯□╰)o
emit使用约定
事件名的命名规范同组件
父组件在绑定子组件上的自定义事件时，必须 完全匹配 事件名，这里不像组件与子组件中使用时是使用的 短横线分隔命名 ，而是 完全匹配 。
约定较少，主要注意使用时是和组件不同的，名称需要完全匹配。
emit使用
首先我们在子组件中定义事件,说是定义，不如说是调用。因为是子组件直接在某段逻辑中调用的 emit ：
// child.vue
export default {
methods: {
submit() {
this.$emit('submitForm', this.data)
}
}
}这里我们定义了调用的自定义事件名称为 submitForm ，那么在父组件中使用：
<!-- parent.vue -->
<template>
<div>
<child v-on:submitForm="submit"></child>
</div>
</template>
<script>
export default {
methods: {
submit(data) {
// 处理逻辑
}
}
}
</script>可以看到这里在使用时， v-on 绑定的事件名称是 submitForm 而不是 submit-form 。
这一点需要注意。
以上是“Vue中子组件与数据传递的示例分析”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
