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

一、Vue的事件类型

1、常用事件

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

2、Vue中的按键修饰符

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

(1)监听用户是否按回车键(Enter)

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

在Vue中的写法：

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

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

二、Vue的组件

1、组件的创建

(1)创建组件的模板：

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

(2)注册组件

App.component(“标识名”,组件对象)

  App.component("my-obj",obj);
1

☀️举个例子（Vue创建子组件的方法）：

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({})//创建一个空的Vue主组件
        // 这个是个对象，也是子组件的一个模板
        const alertComonent = {
            data(){
                return{
                    msg:'警告框提示',
                    count:0
                }
            },
            methods:{
                click(){
                    alert(this.msg+this.count++)
                }
            },
            template:``//子组件的视图
        }
        // 创建子组件
        App.component('my-alert',alertComonent)//给子组件重新命名个名字为my-alert
        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

点击按钮，给出提示框警告：
在这里插入图片描述

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

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

<script src="https://unpkg.com/vue@next">script>
<body>
    <div id="app">
        <my-alert title="登录">my-alert>
        <br>
        <my-alert title="注册">my-alert>
    div>
    <script>
        const App = Vue.createApp({})//创建一个空的Vue主组件
        // 这个是个对象，也是子组件的一个模板
        const alertComonent = {
            data(){
                return{
                    msg:'警告框提示',
                    count:0
                }
            },
            methods:{
                click(){
                    alert(this.msg+this.count++)
                }
            },
            props:["title"],//给组件添加外部属性
            template:``//子组件的视图
        }
        // 创建子组件
        App.component('my-alert',alertComonent)//给子组件重新命名个名字为my-alert
        App.mount('#app')
    script>
body>
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

点击登录按钮：
在这里插入图片描述点击注册按钮：

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

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

有两种写法（可以达到相同的目的）：

方法一：单击子组件视图按钮，子组件直接通过$emit调用外部组件方法,来进行传参

注意：子组件的方法myclick要和@myclick的名字要一样，才能调用父组件的appfunc方法

<script src="https://unpkg.com/vue@next">script>

<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'],
            template:``
        }
        App.component("my-com1",com1)
        App.mount('#main')
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在这里插入图片描述

方法二：单击子组件视图按钮，触发click事件，调用子组件sonClick的方法，来进行传参：

  <script src="https://unpkg.com/vue@next">script>

<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>
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