Vue2:子组件传父组件-反向传值

子组件通过调用父组件的方法给父组件传值:

因为通过属性传值是单向的,有时候我们需要子组件的data 数据需要交给父组件使用:

子组件的自定义事件中,用$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","要给父组件传的数据")

 

posted on 2022-09-08 10:45  香香鲲  阅读(852)  评论(0编辑  收藏  举报