使用vue怎么实现父子组件间的传值-创新互联

  
  
  



  
  
  
{{total}}

在以上代码中，我们在父组件中定义了一个 total 数据，初始值为 count1 + count2 的和。我们在子组件内定义了一个 handleClick() 的方法，让父组件传过来的 count 值每次都 +1，我们还在 handleClick() 的方法内定义了 this.emit( ′ change ′ ,1)的方法，它的意思是子组件通过 emit(′change′,1)的方法，它的意思是子组件通过emit 属性向外触发一个 change 事件，并且携带了一个参数 1，然后我们在 HTML 的 标签内在父组件的 methods 属性内通过 handleChange() 方法监听这个 change 事件，即 @change 和 $emit 的事件名称自己定义，只要名称一致即可。在 handleChange() 方法内接收从子组件通过 change 事件传过来的参数 1，让后让 total 数据加上这个参数 1 即可实现一个简单的累加计算。

以上便是子组件向父组件传值的过程，结果如下：

从上面的例子我们已经实现了父子组件间的相互传值，是通过 change 事件将每次累加的数值 1 传给父组件，通过数据的方式修改 total 值，Vue 官方建议我们尽量通过数据的方式而不是操作 DOM 的方式来实现操作，但是在极端条件下我们必须要操作 DOM 来实现，Vue 也为我们提供操作 DOM 的方法，如下：

  
  
  



  
  
  
{{total}}