Vue中的事件属性四步实现

事件属性是Vue中很重要的一部分，子组件依靠事件触发，向父组件传递数据。以下是子组件向父组件传输数据的四步：
 

子组件的内容：

1.子组件标签中设置点击事件触发changeTitle函数（标签header中绑定title属性值）

<header v-on:click="changeTitle">
    <h1>{{ title }}</h1>
</header>

2.子组件功能（el和data部分代码省略）

methods:{
    changeTitle:function(){
       this.emit('titleChange','传输的数据');
    }
}

设置changeTitle函数，向上传递自定义事件titleChange,并传递数据"传递的数据"
 

3、父组件

父组件的标签中设置自定义事件（changeTitle）触发函数updateTitle，并且传入实参$event。

<app-header v-on:changeTitle="updateTitle($event)" v-bind:title="title"></app-header>

4、父组件中，引入组件

设置updateTitle函数，e是形参，将子组件的数据传入父组件中，并赋值title参数。

import Users from "url"

method:{
 updateTitle(e){
  this.title = e;
 },
 data:{
  title:"funny Vue"
 }
}

经过上述四步，即可实现子组件的数据向上传递的父组件，实现父组件和子组件的数据共享功能。