Vue的事件类型&组件中数据和事件的传递

一、Vue的事件类型

1、常用事件

事件	说明
click	单击
dblclick	双击
click	单击
click	单击
click	单击
focus	获取焦点
blur	失去焦点
change	元素内容改变
select	元素内容被选中
mousedown	鼠标按键被按下
mouseup	鼠标按键抬起
mousemove	鼠标在组件内移动
mouseout	鼠标移出组件
mouseover	鼠标移入组件
Keydown	键盘按键被按下
Keyup	键盘按键抬起

2、Vue中的按键修饰符：对特殊键识别时需要使用按键修饰符

2.1、检测用户是否按回车键(Enter)

 keyup(event){
		     if(event.key == 'Enter')
			 {
			    
			 }
		  }
1
2
3
4
5
6

在Vue中的写法：


  	    <input @keyup.enter="keyup"/>
1
2

enter、ctrl、alt、shift、left(鼠标左键)、right(鼠标右键)、middle(中间键)

二、Vue的组件

1、组件的创建：

1.1、创建组件的模板

  const obj = {    
			  data(){
			     return {
				 
				 }
			  },
			  methods: {
			  }
		      template: `模板字符串`  //组件的视图
		  }
		  
1
2
3
4
5
6
7
8
9
10
11

1.2、注册组件

  App.component("标识名",组件对象)
1

演示：

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://unpkg.com/vue@next">script>
head>
<body>
    <div id="app">
     <my-alert>my-alert>
    div>
    <script>
        const App = Vue.createApp({});

        const alertComonent = {
            data(){
                return {
                    msg:'警告',
                    count:0
                }
            },
            methods:{
                click(){
                    alert(this.msg+this.count++)
                }
            },
            template:'
'
        }
      //创建子组件
      App.component("my-alert",alertComonent)

      App.mount('#app');
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这里插入图片描述

点击按钮，给出提示框警告

2、组件中数据和事件的传递

1.1、给组件添加外部属性：在组件的对象模板中使用props来定义组件的外部属性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://unpkg.com/vue@next">script>
head>
<body>
    <div id="app">
      <my-alert title="登录">my-alert>
      <br><br>
      <my-alert title="注册">my-alert>
    div>

    <script>
        const App = Vue.createApp({});

        const alertComonent = {
            data(){
                return {
                    msg:'警告',
                    count:0
                }
            },
            methods:{
                click(){
                    alert(this.msg+this.count++)
                }
            },
            props:["title"],
            template:'
'
        }
      //创建子组件
      App.component("my-alert",alertComonent)

      App.mount('#app');
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

在这里插入图片描述

在这里插入图片描述
分别点击登录和注册按钮后都出现的警示框

1.2、处理组件事件：在子组件中调用外部组件的方法(使用$emit来实现)

（1)、在子组件中调用父组件方法时，可以传参

一共有两种方法可以达到此目的

方法一、

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://unpkg.com/vue@next">script>
head>
<body>
    <div id="main">
      <my-com1 title="按钮1" @myclick="appfunc">my-com1>
    div>
    <script>
        const App = Vue.createApp({
            methods:{
                appfunc(){
                    console.log('点击自定义组件')
                }
            }
        })

        const com1 = {
            props:['title'],
            template:``
        }

        App.component("my-com1",com1);
        App.mount("#main")
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

在这里插入图片描述
方法二、

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <script src="https://unpkg.com/vue@next">script>
head>
<body>
    <div id="main">
      <my-com1 title="按钮1" @myclick="appfunc">my-com1>
    div>
    <script>
        const App = Vue.createApp({
            methods:{
                appfunc(param){
                    console.log('点击自定义组件,参数是'+param)
                }
            }
        })

        const com1 = {
            props:['title'],
            methods:{
                sonclick(){
                    this.$emit('myclick',this.title)
                }
            },
            template:``
        }

        App.component("my-com1",com1);
        App.mount("#main")
    script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

在这里插入图片描述

相关阅读:
ELK 7.17.5 集群部署及使用
 maven配置jib-maven-plugin插件构建java应用docker镜像
 一对多关系实现部门—＞员工的查询
 Vue3+node.js网易云音乐实战项目(六)
[CF643F]Bears and Juice
Array and Set work process
redis + celery
[激光原理与应用-17]：《激光原理与技术》-3- 激光的产生原理：微观粒子、能级、电子、光子、受激辐射
 2023年8大在线渗透测试工具介绍与分析
 微软在Microsoft Build 2024 上发布了.NET 9 预览版4
原文地址：https://blog.csdn.net/thwr1881/article/details/126251057