首页 > 其他分享 >VUE框架CLI组件化组件绑定自定义事件时回调函数的this对象------VUE框架

VUE框架CLI组件化组件绑定自定义事件时回调函数的this对象------VUE框架

时间:2024-09-18 10:51:10浏览次数:7  
标签:VUE console name 框架 绑定 log 组件 event1 函数

<template>
	<div>
		<!-- 内置函数的实现步骤 -->
		<!-- 提供事件源,给事件源绑定事件,编写回调函数,将回调函数和事件进行绑定 -->
		<!-- 等待事件的触发,事件触发执行回调函数 -->
		<!-- 组件的自定义事件实现步骤 -->
		<button @click="Hello()">你好</button>
		<!-- 给User组件绑定自定义事件 -->
		<!-- 全称写法v-on:事件名称简写为@事件名 -->
		<!-- 对于组件自定义事件来说,要想让事件发生,就需要执行一段代码 -->
		<!-- 这段代码负责触发这个事件,让这个事件发生 -->
		<!-- 这个事件绑定在这个VC上 -->
		<User v-on:event1="doSome" @event2="doOther"></User>
		<!-- 简写形式 -->
		<!-- 事件绑定在哪个组件上,触发事件的代码就在哪个组件上编写 -->
		<User @event1="doSome" @event2="doOther"></User>
		<!-- 总结到目前,父子组件如何通信 -->
		<!-- props传值(父组件向子组件),自定义事件(子组件向父组件) -->
		<!-- 在父组件中定义一个方法,将方法传递给子,然后在子组件中触发这个方法,并传递参数 -->
		<!-- 第二种方法,也是更常用的,使用组件自定义事件的方式,也可以完成子向夫传数据 -->
		<!-- 在父组件绑定事件,在子组件触发事件 -->
		<!-- 子组件传递父组件是,父组件绑定,子组件触发(父绑定,子触发) -->
		<User ref="user"></User>
	</div>
</template>
 
<script>
import User from "./components/User.vue"
export default {
	name : "App",
	components : {User},
	mounted(){
		// 当我们的函数是箭头函数,函数的this对象也是父类对象App的vc
		// 如何判断箭头函数的执行者this呢?首先明确,箭头函数没有this
		// 箭头函数执行时需要向外找,上一级的this就是它的this
		this.$refs.user.$on("event1",() => {console.log(this)})
		// 当我们的函数是普通函数,函数体的this是当前vc实例,不是APP组件实例
		// this.$refs.user.$on("event1",function(){console.log(this);})
		// 获取组件
		// 给ref=user的组件绑定event1事件,并且给event1这个事件绑定一个回调函数doSome()
		// 以传参的形式让父类执行,this就变成了App这个父类实例
		// this.$refs.user.$on("event1",this.doSome);
		// this.$refs.user.$on("event2",this.doOther);
		// 如果这里的函数是普通的函数function
		// 或者是箭头函数,应该怎么处理
		// 仅一次的设置方式
		// this.$refs.user.$once("event1",this.doSome);
	},
	methods : {
		Hello(){
			console.log("Hello Vue");
		},
		// doSome(name,age,gender){
		// 	console.log(name,age,gender)
		// }
		// 不确定个数,后期拓展写法
		// 仅限ES6的新语法...params
		doSome(name,...prams){
			console.log(name,prams);
			console.log(this);
		},
		doOther(){
			console.log("doOther");
		}
	}
}
</script>
 
<style>
 
</style>
<template>
    <div>
        <button @click="triggerEvent1()">触发event1事件</button>
        <button @click="triggerEvent2()">触发event2事件</button>
        <button @click="unbinding">解除绑定</button>
        <!-- vue实例销毁的时候,会把我们实例上绑定的事件全部解绑 -->
        <button @click="goodbye()">销毁VUE实例</button>
    </div>
</template> 
 
<script>
export default {
    name : "User",
    methods : {
        triggerEvent1(){
            // 触发事件的方法
            // 代码意思是触发event1这个事件
            // this是当前的组件实例
            // $emit就是触发爆发
            this.$emit('event1',this.name,this.age,this.gender);
        },
        triggerEvent2(){
            this.$emit("event2");
        },
        // 解除绑定
        unbinding(){
            // 仅仅解绑this绑定的event1事件
            // this.$off('event1');
            // 全部解绑写法
            // this.$off();
            // 解绑多个写法
            this.$off(["event1","event2"]);
        },
        goodbye(){
            // 销毁完,全部的绑定效果全部失效
            this.$destroy();
        }
    },
    data(){
        return {
            name : "张三",
            age : 20,
            gender : "男"
        }
    }
}
</script>
 
<style>
 
</style>

标签:VUE,console,name,框架,绑定,log,组件,event1,函数
From: https://blog.51cto.com/u_16322355/12044279

相关文章

  • Vue自定义指令以及项目中封装过的自定义指令
     自定义指令Vue 自定义指令是Vue.js框架中一个非常强大的功能,它允许你注册一些全局或局部的自定义DOM操作指令,以便在模板中复用。自定义指令通过Vue.directive()方法进行全局注册,或者在组件的directives选项中局部注册。自定义指令的钩子函数Vue自定义指令可以包含几个......
  • 99元阿里云服务器部署若依前后端分离版(ruoyi-vue)
    1.购买阿里云最近阿里云推出99元套餐,相当划算,薅羊毛搞起->新老同享阿里云99一年    系统选择centos2.安装JDK        JDK>=1.8虽说推荐1.8版本,但毕竟有点老,我选的JDK17,安装过程如下:#下载安装包wgethttps://download.oracle.com/java/17/archive/jdk......
  • [附源码]超简洁个人博客网站搭建+SpringBoot+Vue前后端分离
    今天带来一款优秀的项目:个人博客系统源码 。系统采用的流行的前后端分离结构,内含功能包括"写博客文章",“修改博客文章”,“富文本编辑器”,“评论管理”“管理员角色”,“游客角色”,“文章标签”,“文章分类”如果您有任何问题,也请联系小编,小编是经验丰富的程序员! 一.系统演......
  • 安卓平台WIFI Log关键字(华为双框架)
    安卓平台WIFILog关键字(华为双框架)HiLog关键字一STA关键字1)打开关闭WIFIsetWifiEnabled2)扫描关键字startscan|wifiscanlog|scanresults|getScanResults3)连接关键字Tryingtoassociatewith|CTRL-EVENT-ASSOC-REJECT|selectedBSS|wlan0:State|CTRL-EVENT-DI......
  • 【视频教程】手把手AppWizard轻松制作一个emWin滑动主界面控制框架,任意跳转控制(2024-0
    现在的新版AppWizard已经比较好用,用户可以轻松的创建各种项目常规界面。比如早期创建一个支持滑动的主界面框架,并且可以跳转各种子界面,仅仅界面布局和各种图片格式转换都要花不少时间,而现在使用AppWizard,可以说轻轻松松,毫不费力。用户唯一要做的就是根据自己的芯片性能做一定的速度......
  • Vue3.5中解构props,让父子组件通信更加丝滑
    前言在Vue3.5版本中响应式Props解构终于正式转正了,这个功能之前一直是试验性的。这篇文章来带你搞清楚,一个String类型的props经过解构后明明应该是一个常量了,为什么还没丢失响应式呢?本文中使用的Vue版本为欧阳写文章时的最新版Vue3.5.5关注公众号:【前端欧阳】,给自己一个进阶vu......
  • [Vue] v-html、v-show、v-if 的区别
    v-if作用:根据条件动态创建或销毁DOM元素。原理:v-if实际上是按需渲染的,它会根据表达式的真假值来决定是否在DOM树中插入或移除元素。如果条件为false,该元素不会存在于DOM中。性能:因为v-if会真正地添加或移除元素,因此它在初次渲染时的开销较大,特别是当需要频繁切换时会......
  • 第二章 集合框架和泛型(二)
    第二章集合框架和泛型(二)文章目录第二章集合框架和泛型(二)一、Map**map的使用****常用方法****遍历Map集合**二、泛型集合三、Collections算法类Collections类常用方法Collections排序一、Mapmap的使用以键值对形式进行储存数据key不能重复常用方法方法......
  • 第一章 集合框架和泛型(一)
    java集合框架和泛型(一)文章目录java集合框架和泛型(一)一、集合框架二、包含的内容三、List接口的实现类四、ArrayList常用方法五、LinkedList常用方法六、Set接口七、迭代器Iterator一、集合框架如果并不知道程序运行时会需要多少对象,或者需要更复杂方式存储对象......
  • Vue实战指南:Vue中将一维对象数组转换为二维对象数组
    Vue实战指南:Vue中将一维对象数组转换为二维对象数组引言一维对象数组与二维对象数组的概念一维对象数组二维对象数组Vue中转换的方法示例一:使用计算属性实现转换示例二:使用methods中的函数实现转换示例三:使用Vue自定义指令实现转换示例四:使用Vuex进行状态管理实际开发......