VUE框架CLI组件化组件的自定义事件和子组件向父组件传递数据的实现------VUE框架

<template>
	<div>
		<!-- 内置函数的实现步骤 -->
		<!-- 提供事件源,给事件源绑定事件,编写回调函数,将回调函数和事件进行绑定 -->
		<!-- 等待事件的触发,事件触发执行回调函数 -->
		<!-- 组件的自定义事件实现步骤 -->
		<button @click="Hello()">你好</button>
		<!-- 给User组件绑定自定义事件 -->
		<!-- 全称写法v-on:事件名称简写为@事件名 -->
		<!-- 对于组件自定义事件来说,要想让事件发生,就需要执行一段代码 -->
		<!-- 这段代码负责触发这个事件,让这个事件发生 -->
		<!-- 这个事件绑定在这个VC上 -->
		<!-- <User v-on:event1="doSome"></User> -->
		<!-- 简写形式 -->
		<!-- 事件绑定在哪个组件上,触发事件的代码就在哪个组件上编写 -->
		<User @event1.once="doSome"></User>
		<!-- 总结到目前,父子组件如何通信 -->
		<!-- props传值(父组件向子组件),自定义事件(子组件向父组件) -->
		<!-- 在父组件中定义一个方法,将方法传递给子,然后在子组件中触发这个方法,并传递参数 -->
		<!-- 第二种方法,也是更常用的,使用组件自定义事件的方式,也可以完成子向夫传数据 -->
		<!-- 在父组件绑定事件,在子组件触发事件 -->
		<!-- 子组件传递父组件是,父组件绑定,子组件触发(父绑定,子触发) -->
	</div>
</template>

<script>
import User from "./components/User.vue"
export default {
	name : "App",
	components : {User},
	methods : {
		Hello(){
			console.log("Hello Vue")
		},
		// doSome(name,age,gender){
		// 	console.log(name,age,gender)
		// }
		// 不确定个数,后期拓展写法
		// 仅限ES6的新语法...params
		doSome(name,...prams){
			console.log(name,prams)
		}
	}
}
</script>

<style>

</style>

<template>
    <div>
        <button @click.once="triggerEvent1()">触发event1事件</button>
    </div>
</template>

<script>
export default {
    name : "User",
    methods : {
        triggerEvent1(){
            // 触发事件的方法
            // 代码意思是触发event1这个事件
            // this是当前的组件实例
            // $emit就是触发爆发
            this.$emit('event1',this.name,this.age,this.gender);
        }
    },
    data(){
        return {
            name : "张三",
            age : 20,
            gender : "男"
        }
    }
}
</script>

<style>

</style>