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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_37064409/article/details/78880183

• vue框架的最大的特点就是组件化，降低偶度，可多次调用，避免重复劳动。
  所以父子组件中的数值传递则是必不可少的功能，下面是我的个人笔记。

  1.父往子传值：

  1. 父组件data中定义prop数据

  2. 父组件中通过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.需要注意的是：在父组件模版绑定事件的时候是在该子组件调用的标签中。