Vue2:子组件传父组件-反向传值
子组件通过调用父组件的方法给父组件传值:
子组件的自定义事件中,用$emit触发事件调用父组件方法给父组件传值 (重点),让父组件监听到自定义事件 。
过程:
通过在子组件上定义自定义事件,在子组件中通过$emit 来触发事件;
子组件的事件被触发并传参,事件处理函数可以接收到子组件的数据;
事件绑定的事件处理函数在父节点上,故可在事件处理函数中用到子组件的数据值来修改父节点的数据。
//父组件中: <my-search @myevent="handleEvent"></my-search> //myevent是事子组件的自定义事件 //handleEvent是绑定的父组件的方法 子组件中: 在任意业务中触发事件:this.$emit("myevent","要给父组件传的数据")
1、
解决数据没有被双向绑定我们可以使用 Vue.$set 实例方法
语法:
在父组件中:
this.$set(原数组, 索引值, 需要赋的值)
触发事件传值:使用$emit
语法:
this.$emit( event, arg ) //触发当前实例上的事件
2、.sync
修饰符
2.3.0+ 新增
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以变更父组件,且在父组件和子组件两侧都没有明显的变更来源。
这也是为什么我们推荐以 update:myPropName
的模式触发事件取而代之。
在父组件中:
v-bind:属性.sync
子组件中:
this.$emit("update:属性",new属性)
然后父组件可以监听那个事件并根据需要更新一个本地的数据 property。
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document>
为了方便起见,我们为这种模式提供一个缩写,即 .sync
修饰符:
<text-document v-bind:title.sync="doc.title"></text-document>
3、v-on
父级组件可以像处理 native DOM 事件一样通过 v-on
监听子组件实例的任意事件:
在子组件上触发一个自定义事件$emit,并传递一个自定义事件
<blog-post
...
v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
同时子组件可以通过调用内建的 $emit
方法并传入事件名称来触发一个事件
<button v-on:click="$emit('enlarge-text')">
Enlarge text
</button>
4、
父组件中:
v-model="属性"
子组件中:
props:["value"]
//父组件中:<my-search @myevent="handleEvent"></my-search>//myevent是事子组件的自定义事件 //handleEvent是绑定的父组件的方法
子组件中:在任意业务中触发事件:this.$emit("myevent","要给父组件传的数据")