脚手架的使用与组件自定义事件

最新推荐文章于 2022-12-30 11:42:33 发布

实习期小潘

最新推荐文章于 2022-12-30 11:42:33 发布

阅读量588

点赞数 1

分类专栏：笔记文章标签： vue.js 前端学习

本文链接：https://blog.youkuaiyun.com/m0_60264901/article/details/124322468

版权

笔记专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用Vue CLI搭建项目脚手架，包括src文件夹结构、自定义事件的绑定与解绑，重点讲解了组件间数据传递的自定义事件机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学了组件的概念与使用规则

接下来就需要搭配脚手架！

一旦搭配上脚手架我们对于Vue框架的使用就会如虎添翼！

ref属性

作用：用于节点打标识，简单理解就是可以获取dom节点的元素。

props属性

作用：让组件接收外部传过来的数据(就是接收模板里面的name、age、sex等用户输入的数据)。

mixin混入

作用：可以把多个组件共用的配置提取成一个混入对象。

plugin插件

作用：用于增强Vue。

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

scoped样式

作用：让样式在局部生效，防止冲突。

组件自定义事件

组件自定义事件的绑定

Vue的自定义组件使用场景：A是父组件，B是子组件，B子组件想给A父组件传数据，那么就要在A父组件中给B子组件绑定自定义事件（事件的回调在A父组件中）。

组件自定义事件的作用：通过父组件提前给子组件传递一个函数（方法），子组件使用该函数，利用传递参数的形式给父组件传值，回调在父组件中。

先是在父组件App.vue中自定义一个事件：

<!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on）-->
<Student @atguigu="getStudentName" @demo="m1"/>
//getStudentName是一个函数方法

在子组件Student.vue这个文件夹中绑定了事件并且在它的methods中写好方法：

methods: {
			add(){
				console.log('add回调被调用了')
                //这里的this就是此时Student.vue中的事件number自加1
				this.number++
			},
			sendStudentlName(){
				//触发Student组件实例身上的atguigu事件  
                //this在这指的就是实例对象vc
				this.$emit('atguigu',this.name,666,888,900)
				// this.$emit('demo')
				// this.$emit('click')
			},
			unbind(){
				this.$off('atguigu') //解绑一个自定义事件
				// this.$off(['atguigu','demo']) //解绑多个自定义事件
				// this.$off() //解绑所有的自定义事件
			},
			death(){
				this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。
			}
		},

效果：当在子组件Student.vue中绑定事件（比如说点击按钮）后就能得到相应的方法效果，然后通过在父组件中自定义的事件atguigu这个事件返回到父组件中，父组件中@atguigu="getStudentName"再调用App.vue这个父组件里面的getStudentName这个方法。（这个过程就是子组件传给父组件）

methods: {
			getSchoolName(name){
				console.log('App收到了学校名：',name)
			},
			getStudentName(name,...params){
				console.log('App收到了学生名：',name,params)
				this.studentName = name
			},
			m1(){
				console.log('demo事件被触发了！')
			},
			show(){
				alert(123)
			}
		},
//调用的函数方法在app.vue父组件中

组件自定义事件的解绑

若想解绑事件有以下几个方法：

🎗 解绑一个自定义事件：this.$off('atguigu')

🎗 解绑多个自定义事件：this.$off(['atguigu', 'demo'])

🎗 解绑所有的自定义事件：this.$off()

组件上可以绑定原生DOM事件，需要使用native修饰符

<Student ref = "student" @click.native="show">

注意点：

通过this.$ref.xxx.$on('atguigu',回调)。绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题。

总结

以上内容就是近期学习总结！

💕~ENDING~🎉

脚手架的使用与组件自定义事件

目录

脚手架Vue CLI

定义

分析脚手架的构成

组件自定义事件

组件自定义事件的绑定

组件自定义事件的解绑

总结