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

  • 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>von:eventName=changeMessage( event)”
    3.父组件methods中执行changeMessage($event)方法
    4.需要注意的是:在父组件模版绑定事件的时候是在该子组件调用的标签中。

你可能感兴趣的:(vue-js)