Vue2 07 自定义事件内容分发和入门小结

Vue2 07 自定义事件内容分发和入门小结
7.1 自定义事件内容分发

自定义事件内容分发主要解决的问题是：Vue 实例的数据，但是组件的方法事件需要操作实例的数据。然而作用域根本达到不了。

其实这个问题在这个方法之前，能够想到的解决方案有很多。比如说我们可以把要修改的数据提高作用域拿出来。再比如我们可以将那个带修改的数据传参到组件的函数里。但是无法改变原数据！无法做到动态更新。所以我们才需要 Vue 官方给出的方法。

this.$emit(自定义事件名,参数)：去触发一个自定义事件。并且提供给方法参数。

v-on:自定义事件名字 = "函数"：自定义一个事件，并且绑定一个方法函数。
1. 首先我们先绑定一个事件给组件。
```
  Vue.component("mqy-item",{
      props: ['value','index'],
      template: '{{value}} 
',
      methods: {
          remove: function (index){
              alert(index);
          }
      }
  });
1
2
3
4
5
6
7
8
9
```
你会发现我们根本摸不到 Vue 实例下面的那个 arr 数组
1. 自定义一个事件，直接 v-on:自定义事件的名字 然后绑定 Vue 实例下的一个 methods 的方法。
```
        <mqy-item v-for="(item,index) in arr" slot="mqy-item" v-bind:value="item" :index="index"
                  v-on:vue-remove="arrRemove"
        >mqy-item>
1
2
3
```
```
  let vm = new Vue({
      el: "#vue",
      data: {
          title: "标题",
          arr: ["Java","前端","linux"]
      },
      methods: {
          arrRemove: function (index){
              console.log(index);
          }
      }
  })
1
2
3
4
5
6
7
8
9
10
11
12
```
但是我们并不知道这个事件什么时候触发！没有触发的机制。
诶，就恰好是这个点给到了我们机会！如果我们让它在点击组件的按钮事件的函数那里触发该自定义事件的话。是不是就相当于跨过了作用域的限制，摸到了 arr 数组呢？？
1. 利用 this.$emit() 去触发这个自定义事件
this.$emit("vue-remove",index);
```
  Vue.component("mqy-item",{
      props: ['value','index'],
      template: '{{value}} 
',
      methods: {
          remove: function (index){
              this.$emit("vue-remove",index);
          }
      }
  });
1
2
3
4
5
6
7
8
9
```
1. 完善 arrRemove 的代码并进行测试
```
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽 slot 的应用title>
head>
<body>

<div id="vue">
    <mqy>
        <mqy-title slot="mqy-title" v-bind:value="title">Fuck！mqy-title>
        <mqy-item v-for="(item,index) in arr" slot="mqy-item" v-bind:value="item" :index="index"
                  v-on:vue-remove="arrRemove"
        >mqy-item>
    mqy>
div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js">script>
<script>
    let Arr = [];
  Vue.component("mqy",{
      template: '\\
'
  });

  Vue.component("mqy-title",{
      props: ['value'],
      template: '{{this.$slots.default[0].text}}
'
  });

  Vue.component("mqy-item",{
      props: ['value','index'],
      template: '{{value}} 
',
      methods: {
          remove: function (index){
              this.$emit("vue-remove",index);
          }
      }
  });

  let vm = new Vue({
      el: "#vue",
      data: {
          title: "标题",
          arr: ["Java","前端","linux"]
      },
      methods: {
          arrRemove: function (index){
              this.arr.splice(index,1); // 删除 index 下标的那个 元素
          }
      }
  })

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
```
有时候会使用 v-bind:key = "唯一标识" 这样可以让这些子项目保持唯一性。比如说三个子项都有选择框，第一个第三个被选中。然后打乱排序后，可能还是第一个和第三个被选中！但是如果你写了 v-bind:key = "唯一标识" ，就还是以前的第一个和第三个被选中。即动态保持了唯一性。

7.2 入门小结

Vue 的核心：数据驱动、组件化。

优点：借鉴了 AngulaJS 的模板化开发和 React 的虚拟 Dom，虚拟Dom 就是把 Dom 的操作放到内存中高效执行。

常用的属性：
- v-if
- v-else-if
- v-else
- v-for
- v-on:绑定的事件名 = "绑定的函数" <–> 简写：@绑定的事件名 = "绑定的函数"
- v-model:属性名 = "绑定的表达式变量/数据" 应用于表单，可以实现数据双向绑定
- v-bind:参数名 = "绑定的表达式变量/数据" <–> 简写：:参数名 = "绑定的表达式变量/数据" 单向绑定
组件化
- 组合组件 slot 插槽用来设计父组件的子组件的
- 要是想触发或执行一个事件得用到 this.$emit("事件名",参数)
- 计算属性的特色，缓存计算后的数据结果
遵循 SoC 关注度分离原则，Vue 是纯粹的视图框架，并不包含 “比如 Ajax 之类的通信功能，为了解决通信问题，我们需要使用 Axios 框架做异步通信。”

实际开发的展望

Vue 的开发：

后端的话！大多数都是基于 NodeJS的，当然也有基于其它服务端程序的。Java 写的服务端接口也可以。运行在 tomcat 上。

前端的话！实际开发大多数都是采用 vue-cli 脚手架开发 vue-router 路由 vuex 状态管理 ElementUI 饿了么Vue UI 或者 ICE 阿里巴巴出品 这一些列来 **快速的搭建前端的项目！！ **
相关阅读:
Websocket搭建(Vue+Springboot)
Casper Network（CSPR）即将迎来两项重大升级，以实现功能上的进一步完善
 虹科Pico十月活动 | 精彩丰富的汽车示波器培训与直播活动等你参加！
Flutter——启动页白屏的优化
 972信息检索 | 第六章专业性书目信息检索系统
 数据结构P46（2-1~2-4）
阿里云——OpenAPI使用——短信服务
 leetcode - 823. Binary Trees With Factors
bash shell 无法使用 perl 正则
 浅析基于AI智能识别技术的明厨亮灶智能化监管方案
原文地址：https://blog.csdn.net/qq_52606908/article/details/126035414

7.1 自定义事件内容分发

7.2 入门小结