vue组件之间传递数据之prop&$emit

vue项目开发，组件之间传递数据

1. 兄弟组件
   兄弟组件之间传输数据，用vuex的store方式。
2. 父子组件
   父子组件之间传输数据，用vue的prop & $emit方式。

通过 Prop 向子组件传递数据

一，传递数据

1，这种方式只能由父向子传递，子组件不能更新父组件内的data

子组件.vue
先定义一个子组件，在组件中注册props

父组件.vue
在父组件中，引入子组件，并传入子组件内需要的值

2，props 传入单数据

父组件.vue

3，props 传入多个数据

如果在父组件的模板类添加其他元素或者字符会有：

①在最前面加入—每个子组件渲染出来都会在其前面加上
②在最后面加入—每个子组件渲染出来都会在其后面加上
③在中间加入—他前面子组件后面加上，后面的子组件后面加上

script

html

web页面

注意：camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：

Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '{{ myMessage }}'
})

二，动态prop

要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件

三，表达式计算，传递值

如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算

四，Prop类型绑定

prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

五，prop验证？？？

参考链接：https://blog.csdn.net/gao_xu_520/article/details/77567096

$emit

子组件可以使用 $emit 触发父组件的自定义事件。