vue-父子组件间的相互传值与传址
vue框架的最大的特点就是组件化,降低偶度,可多次调用,避免重复劳动。所以父子组件中的数值传递则是必不可少的功能,下面是我的个人笔记。1.父往子传值:父组件data中定义prop数据父组件中通过v-bind:propName=”propName” 传入 value (”PropName”)2.子组件中通过 props:[“propName”] 接收传输的value3.子组件中通过模版调用{
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.需要注意的是:在父组件模版绑定事件的时候是在该子组件调用的标签中。
更多推荐
所有评论(0)