Vue进阶 =＞源码分析$emit 和 $on,directive,Vue.component ,Vue.extend,Vue.use

最新推荐文章于 2023-09-08 11:47:05 发布
最新推荐文章于 2023-09-08 11:47:05 发布
阅读量302 收藏 2
点赞数 1
分类专栏： # 【Vue2从基础到进阶】 文章标签： vue javascript vue.js 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48200589/article/details/118556749
版权

1.$emit 和 $on

其实就是事件绑定和数据绑定
下面的例子:我们可以打开断点调试一步步的看下去就懂了

<html>
  <head>
    <title>$emit 和 $on</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <button @click="boost">触发事件</button>
    </div>
    <script>
      new Vue({
        el: '#root',
        data() {
          return {
            message: 'hello vue'
          }
        },
        created() {
          this.$on('my_events', this.handleEvents)
        },
        methods: {
          handleEvents(e) {
            console.log(this.message, e)
          },
          boost() {
            this.$emit('my_events', 'my params')            
          }
        }
      })
    </script>
  </body>
</html>

2.directive 用法

TIP
官方文档：https://cn.vuejs.org/v2/api/#Vue-directive

  • 打debugger断点,观察
  • 在我们日常项目中,会使用各种各样的组件,其实常用的就是loading.我们不可能每次都通过v-if判断,多写一个div节点
  • 那么就可以使用directive
<html>
  <head>
    <title>directive 用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <div v-loading="isLoading">{{data}}</div>
      <button @click="update">更新</button>
    </div>
    <script>
      Vue.directive('loading', {
        update(el, binding, vnode) {
          if (binding.value) {
            const div = document.createElement('div')
            div.innerText = '加载中...'
            div.setAttribute('id', 'loading')
            div.style.position = 'absolute'
            div.style.left = 0
            div.style.top = 0
            div.style.width = '100%'
            div.style.height = '100%'
            div.style.display = 'flex'
            div.style.justifyContent = 'center'
            div.style.alignItems = 'center'
            div.style.color = 'white'
            div.style.background = 'rgba(0, 0, 0, .7)'
            document.body.append(div)
          } else {
            document.body.removeChild(document.getElementById('loading'))
          }
        }
      })
      new Vue({
        el: '#root',
        data() {
          return {
            isLoading: false,
            data: ''
          }
        },
        methods: {
          update() {
            this.isLoading = true
            setTimeout(() => {
              this.data = '用户数据'
              this.isLoading = false
            }, 3000)
          }
        }
      })
    </script>
  </body>
</html>

3.Vue.component 用法

  • 打debugger断点,观察源码
<html>
  <head>
    <title>Vue.component 用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <Test :msg="message"></Test>
    </div>
    <script>
      Vue.component('Test', {
        template: '<div>{{msg}}</div>',
        props: {
          msg: {
            type: String,
            default: 'default message'
          }
        }
      })
      new Vue({
        el: '#root',
        data() {
          return {
            message: "Test Component"
          }
        }
      })
    </script>
  </body>
</html>

4.Vue.extend 基本用法

<html>
  <head>
    <title>Vue.extend 用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <Test :msg="message"></Test>
    </div>
    <script>
      const component = Vue.extend({
        template: '<div>{{msg}}</div>',
        props: {
          msg: {
            type: String,
            default: 'default message'
          }
        },
        name: 'Test'
      })
      Vue.component('Test')
      new Vue({
        el: '#root',
        data() {
          return {
            message: "Test Extend Component"
          }
        }
      })
    </script>
  </body>
</html>

5.Vue.extend 进阶用法

<html>
  <head>
    <title>Vue.extend 用法2</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      #loading-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <button @click="showLoading">显示Loading</button>
    </div>
    <script>
      function Loading(msg) {
        const LoadingComponent = Vue.extend({
          template: '<div id="loading-wrapper">{{msg}}</div>',
          props: {
            msg: {
              type: String,
              default: msg
            }
          },
          name: 'LoadingComponent'
        })
        const div = document.createElement('div')
        div.setAttribute('id', 'loading-wrapper')
        document.body.append(div)
        new LoadingComponent().$mount('#loading-wrapper')
        return () => {
          document.body.removeChild(document.getElementById('loading-wrapper'))
        }
      }
      Vue.prototype.$loading = Loading
      new Vue({
        el: '#root',
        methods: {
          showLoading() {
            const hide = this.$loading('正在加载，请稍等...')
            setTimeout(() => {
              hide()
            }, 2000)
          }
        }
      })
    </script>
  </body>
</html>

6.Vue.use 用法

<html>
  <head>
    <title>Vue.use 用法</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
      #loading-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.7);
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div id="root">
      <button @click="showLoading">显示Loading</button>
    </div>
    <script>
      const loadingPlugin = {
        install: function(vm) {
          const LoadingComponent = vm.extend({
            template: '<div id="loading-wrapper">{{msg}}</div>',
            props: {
              msg: {
                type: String,
                default: 'loading...'
              }
            }
          }, 'LoadingComponent')
          function Loading(msg) {
            const div = document.createElement('div')
            div.setAttribute('id', 'loading-wrapper')
            document.body.append(div)
            new LoadingComponent({
              props: {
                msg: {
                  type: String,
                  default: msg
                }
              } 
            }).$mount('#loading-wrapper')
            return () => {
              document.body.removeChild(document.getElementById('loading-wrapper'))
            }
          }
          vm.prototype.$loading = Loading
        }
      }
      Vue.use(loadingPlugin)
      new Vue({
        el: '#root',
        methods: {
          showLoading() {
            const hide = this.$loading('正在加载，请稍等...')
            setTimeout(() => {
              hide()
            }, 2000)
          }
        }
      })
    </script>
  </body>
</html>
不停喝水
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
自定义指令（Vue.directive(,)）
spider_man
11-06 863
自定义指令 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 // 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { bind:function(el){}, // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }, updated:function(el){} }) 钩子函数bind，insert
面试官-Vue.js 中的 $emit 和 $on 方法有什么区别？.pdf
08-05
Vue.js 中的 $emit 和 $on 方法有什么区别？ 在 Vue.js 中，$emit 和 $on 方法是两个常用的方法，用于实现组件间的通信。它们可以让我们在一个组件中触发一个自定义事件，并在另一个组件中监听这个事件，从而实现...
vue源码之$on,$emit,$off
浅听记忆的博客
04-09 680
1.$emit $emit在vue中担当一个传递事件的角色，它将我们传递的事件派发到vm的事件系统中（vm._events）,统一去管理派发的事件，源码如下 Vue.prototype.$emit = function (event) { var vm = this; { var lowerCaseEvent = event.toLowerCase(); if (lowerCaseEvent !== event && vm._ev
使用Vue.extend()编写vue插件
少油少盐不要辣
05-22 700
1.前言 一般我们使用的组件，都是通过Vue.component或者components注册组件，然后再使用。今天，我们使用编程式的写法来使用组件。 2.Vue.extend() 使用Vue这个基础构造器，构造出一个“子类”，其实就是个构造函数，通过new运算符生成vue实例。具体见官方文档添加链接描述。 3.如何编程式使用组件呢 比如，我们要实现个弹窗功能。通过编程式导航，我们就不用在模板中写了，可以使用js直接编写唤出弹窗。首先，我们正常的编写弹窗组件。如下： <template> &l
vuejs2.0实现分页组件，使用$emit进行事件监听数据传递
yangmy_Shy的博客
05-14 354
首先使用基础 Vue 构造器，创建一个“子类”,Vue.extend( options ) var barHtml = '<div class="page-bar">'+ '<ul>'+ '<li v-if="cur>1"><a v-on:click="cur...
vue extend 的使用
董小姐不懂你的博客
04-03 2163
前提： 使用之前需要在vue.config.js中添加 runtimeCompiler: true, 如图： 使用： 第一种：无参数---官网示例 1. 创建index.js 图片： 代码： import Vue from "vue"; var RootEle = Vue.extend({ template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>', data: functi
解决vue bus.$emit触发第一次$on监听不到问题
10-15
主要介绍了解决vue bus.$emit触发第一次$on监听不到问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
10-18
今天小编就为大家分享一篇解决Vue.js父组件$on无法监听子组件$emit触发事件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue中this.$emit()的返回值是什么
10-17
在这个方法里，`this.$emit('Echange', e.target.value, val => { console.log(val); })`被用来触发一个名为`Echange`的自定义事件，并传递当前输入框的值作为参数。第二个参数是一个回调函数，允许父组件在接收到...
对vue.js中this.$emit的深入理解
10-18
下面我们将详细探讨`this.$emit`在Vue.js中的应用和原理。 首先，`this.$emit`是Vue实例的一个方法，它被用来触发当前组件的自定义事件。在组件中，我们可以通过调用`this.$emit(eventName, arguments)`来发射一个...
Vue.extend()
张木期的博客
10-14 1077
Vue.extend属于Vue的全局API,在实际业务开发中我们很少使用，因为相比常用的 Vue.component写法使用 extend步骤要更加繁琐一些。但是在一些独立组件开发场景中，Vue.extend + $mount这对组合是我们需要去关注的。 官方文档 学习开始之前我们先来看一下官方文档是怎么描述的。 Vue.extend( options ) 参数： {Object} options 用法： 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。 data选项是特
vue中的$on,$emit,$once,$off源码实现
weixin_34413065的博客
09-01 1382
这几种模式是基于订阅观察者模式的，维护一个事件中心，on的时候将事件按名称存在事件中心里，称之为订阅者，然后emit将对应的事件进行发布，去执行事件中心里的对应的监听器。 第一步就是创建一个构造构造，维护一个事件中心events function EventEmiter(){ this.events = {} } $on //event可以是事件名数组 Ev...
vue源码解析：vue事件方法之$emit方法的实现原理
lee前端技术站
07-12 7813
vue中事件方法一共就四个，挂载在vue实例上的$emit在我们做子组件向父组件传值时，通常会用到，那么$emit的内部实现原理是什么呢？下面我们来详细说下$emit: vm.$emit( eventName, […args] ) 参数： {string} eventName 触发的事件名 [...args] 传递给事件的参数 作用： 触发当前实例上的事件。附加参数都会传给监听器回调。 内部原理： $emit也是采用了发布订阅者设计模式。 Vue.prototype.$emit .
Vue 子类构造器 --- Vue.extend
null
09-26 569
承上启下，主要介绍了Vue.extend 子类构造器 方法及作用
Vue中extend基本用法
最新发布
Hi,印象钟情
09-08 982
可以看到，extend 创建的是 Vue 构造器，而不是我们平时常写的组件实例，所以不可以通过 new Vue({ components: testExtend }) 来直接使用，需要通过 new Profile().$mount(’#mount-point’) 来挂载到指定的元素上。我个人的理解来看，extend提供了一个能够构造组件的函数（也就是构造器）。在一些特定的应用场景（如自己构建一个复杂弹窗）下，我们使用这种函数式的构造组件的方法，会更灵活一些。(2) 新建messageBox.js。
VUE探索第六篇-指令(directive)
恰恰虎的博客
11-18 467
一、什么是指令      上一篇我们讲到组件，组件是为了实现代码复用，将业务逻辑，UI模板封装成一个自定义的"标签"供外部使用，但有些时候我们用普通的dom也能实现相关的功能，但需要对功能进行一些"改造",使我们的实现更简洁，此时就会用到我们的指令。 二、内置指令 vue提供大量的内置的指令，先来总览下这些指令： v-bind:动态的绑定一个或者多个特性值。 v-on:绑定监听事件，用户...
vue 全局事件总线 理解与应用
小白成长记
06-07 315
全局事件总线：任意组件间通信。需要满足的条件： 1. 所有组件（VC）都能看到x组件 2. 可以调用$on、$off、$emit
前端与移动开发之vue-day4（1）
weixin_34033624的博客
11-19 122
父组件向子组件传值组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据 <script> // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '这是父组件中的消息' }, components: {...
Vue：extends继承&组件复用性
席木木的博客
02-19 7655
Vue：extends继承&组件复用性，首先回顾了Vue.js中创建组件实例的几种方式，进而讨论了如何提升单个组件复用性的几种可行方案，最后介绍了Vue的extends选项——如何通过继承提升组件复用性，并介绍了此种方法的不足之处。
Vue.js进阶技巧：插件利用与高效开发
Vue.js进阶学习深入探讨了如何提升开发效率和利用插件的技巧。本篇文档涵盖了以下几个关键知识点： 1. **数据管理**: - `data`: 用于声明组件内部响应式的数据，如 `data: { msg: '信息' }`，这是组件的基础状态...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不停喝水

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值