vue-父子组件间的相互传值与传址

vue框架的最大的特点就是组件化，降低偶度，可多次调用，避免重复劳动。

所以父子组件中的数值传递则是必不可少的功能，下面是我的个人笔记。

1.父往子传值：

父组件data中定义prop数据

父组件中通过v-bind:propName=”propName” 传入 value （”PropName”）

2.子组件中通过 props:[“propName”] 接收传输的value

3.子组件中通过模版调用{{propName}}

2.传值和传引用

1.传值 string number boolean

2.传引用 object array <传地址 –引用地址相同>

对数据更改时表现：

1.当传址时，对传引用数据更改会影响所有引用

2.当传值时只会影响当前数据的变化

3.当父组件更新时，传值与传址的变化

1.事件执行时会将子组件中的所有已更改值覆盖，所以不推荐在子组件中更改父组件的传递值，

2.当传递为地址时，父组件更新不会影响更改后的传址数据。

3.报错信息：

//vue.esm.js?efeb:578 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “value”

4.子往父间传值：<事件传值> emit(“”)1.子组件中注册事件emit(“eventName”,”transmit_value”)

2.父组件中绑定事件 <自定义事件-名称为子组件传递的文件名，event:子组件传递的value值>v−on:eventName=“changeMessage(event)”

3.父组件methods中执行changeMessage($event)方法

4.需要注意的是：在父组件模版绑定事件的时候是在该子组件调用的标签中。