事件属性是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"
}
}
经过上述四步,即可实现子组件的数据向上传递的父组件,实现父组件和子组件的数据共享功能。