vue 自定义事件

静态绑定格式 v-on:事件名=‘回调函数’ 或 @事件名=‘回调函数’

动态绑定格式 借助ref属性 this.$refs.student.$on(‘事件名’,回调函数) //绑定自定义事件

this.$refs.student.$once(‘事件名’,回调函数) //绑定自定义事件(只触发一次)

在被标注事件的组件中声明此事件 this.$emit(‘事件名’,参数)

<template>
	<div class="app">
		<h1>{{msg}}</h1>
		<!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
		<SchoolTest :getSchoolName='getSchoolName'></SchoolTest>
		
		<!-- 通过父组件给子组件绑定自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
		<StudentTest v-on:atguigu='getStudentName'/>
		<!-- 通过父组件给子组件绑定自定义事件实现：子给父传递数据（第二种写法，使用 ref） -->
		<StudentTest ref="student"/>
	</div>
</template>

<script>
	// 引入School组件
	import StudentTest from './components/Student.vue'
	import SchoolTest from './components/School.vue'
	export default {
		name: 'AppTest',
		components: {
			StudentTest,
			SchoolTest
		},
		data(){
			return {
				msg: '你好啊'
			}
		},
		methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
			getStudentName(name, ...params){
				console.log('dome被调用了',name,params)
			}
		},
		mounted() {
			this.$refs.student.$on('atguigu',this.getStudentName)	//绑定自定义事件
			this.$refs.student.$once('atguigu',this.getStudentName)	//绑定自定义事件（一次性）
		}
	}
</script>

student组件：

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStidentName">把学生名给App</button>
	</div>
</template>

<script>
	export default {
		name: 'StudentTest',
		data(){
			return {
				name: '张三',
				sex: '男'
			}
		},
		methods:{
			sendStudentName(){
				// 触发Student组件实例身上的atguigu事件
				this.$emit('atguigu',this.name,1,2,3,4,5,6)
			}
		}
	}
</script>

在自定义组件上绑定的事件默认都为自定义事件。如想要在组件上绑定原生事件可以加上.native。例如@click.native:“回调函数”