Electron + Vue跨平台应用（十四）基础技法（六）

最新推荐文章于 2021-12-17 16:11:30 发布

yi_master

最新推荐文章于 2021-12-17 16:11:30 发布

阅读量450

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/yi_master/article/details/106331948

版权

前端专栏收录该内容

27 篇文章 12 订阅

订阅专栏

1. 局部组件/全局组件
 2. 自定义指令

1. 局部组件/全局组件

一个组件我们可以局部去定义，这个局部我们可以理解为java中的私有属性；组件也可以全局去定义，这个全局可以理解为java中的public属性；

我们先看下定义局部组件的方法：局部定义组件是通过单个vue实例中的components属性来定义实现的；在vue中通常有两种写法

方法一：你在项目中自定义了一个组件文件，如Button.vue，那么局部注册的方法为：

首先在需要引入的Vue实例中import该组件
其次在需要引入的Vue实例中的components中申明该组件
最后在需要引入的Vue实例中引用该组件

完整代码如下：

// 新建一个vue组件
<template>
  <div>
  </div>
</template>

<script>
export default {
  name: 'CusTomButton',
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style scoped>
</style>

// 在其他vue文件中引入组件
<template>
  <div class="home">
    <cus-tom-button :title='测试' v-on:setOnClickListen="setOnClickListen(0)"></cus-tom-button>
 </div>
</template>

<script>
/*
* 局部定义组件是通过单个vue实例中的components属性来定义实现的
*/
import CusTomButton from '@/view/Button'

export default {
  name: 'Home',
  components: {
    CustomDialog
  },
  data () {
    return {
    }
  },
  methods: {
  }
}
</script>

<style scoped>
</style>

方法二：我们也可以在一个Vue文件中定义组件，完整的代码如下，在一个vue文件中定义组件需要注意，组件的data应该是一个函数，且函数返回一个对象

<template>
  <div class="home">
    <my-component></my-component>
  </div>
</template>

<script>
/*
 * 局部组件的定义
 * 这里应该注意下: data应该是一个函数,且其函数返回值为一个对象
 */
var localComponent = {
  data: function () {
    return {
      name: '这是局部组件的定义'
    }
  },
  template: '<h1>这是局部组件的定义</h1>'
}

export default {
  name: 'BasicActivity',
  components: {
    myComponent: localComponent
  }
}
</script>

<style scoped>
</style>

显示效果如下：
在这里插入图片描述

接着再看下全局注册组件，其方法是通过如下方式完成注册

Vue.component(组件名,{方法})

这个注册一般是在main.js中完成，完整代码如下

// 在main.js中全局组件注册：Vue.component(组件名,{方法})
Vue.component('my-whole-component', {
  template: '<h1>我是全局组件</h1>'
})

然后在任意vue文件中即可引入该组件

<template>
  <div class="home">
    <my-whole-component></my-whole-component>
  </div>
</template>

显示效果如下
在这里插入图片描述

2. 自定义指令

当Vue中指令不满足需求的时候，你可能需要自己定义一个指令来完成相应的动作；自定义指令有两种方式

通过Vue.elementDirective来自定义指令，这种方式称呼为元素指令；这种方式在2.0版本中已经废弃，这里就不做过多介绍
通过Vue.directive来自定义指令

在自定义指令中也分为全局自定义指令和局部自定义指令两种，这个和全局/局部过滤器非常相似

先使用伪代码来看下全局自定义指令

  Vue.directive('focus', {
    inserted: function (el) {
      // 聚焦元素
      el.focus()
    }
  })

其中focus为指令名称, inserted为指令的钩子函数，也可以理解为指令的生命周期函数

现在我们这里重点介绍下局部自定义指令，实现的效果是点击元素，元素自动放大的效果；局部自定义指令可以在单个文件中通过directives完成注册，其语法格式为：

  directives: {
    tranself: {
      bind (el, binding) {
        console.log('自定义指定', 'bind')
        // 只运行一次,用来初始化元素
        el.ontouchstart = (ev) => {
          console.log('自定义指定', ev.touches[0])
        }
      },
      inserted () {
        console.log('自定义指定', 'inserted')
        // 被绑定元素插入父节点时，即插入dom时调用（父节点存在即可调用，不必存在于 document 中）
      },
      update (el, binding) {
        console.log('自定义指定', el, binding, binding.value)
        // 当值更新的时候该方法会被调用
        el.style.transform = `scale(${binding.value / 58})`
      },
      componentUpdated (el, binding) {
        console.log('自定义指定', el, binding)
        // 被绑定元素所在模板完成一次更新周期时调用
      },
      unbind () {
        console.log('自定义指定', 'unbind')
        // 当指令绑定的元素被销毁时,会触发指令的 unbind 事件.
      }
    }
  },

其中
1： tranself为自定义指令的指令名称
2：bind，inserted， update ，componentUpdated ，unbind 均为指令的生命周期函数，其中
2.1 bind函数用于初始化指令，只执行一次
2.2 inserted函数用于被绑定元素插入父节点时，即插入dom时调用（父节点存在即可调用，不必存在于 document 中）
2.3 update函数当值更新的时候该方法会被调用
2.4 componentUpdated 函数是在被绑定元素所在模板完成一次更新周期时调用
2.5 unbind 函数是在当指令绑定的元素被销毁时,会触发指令的 unbind 事件.

我们可以通过打印生命周期函数的方式来详细了解其运行过程，同时我们注意到每个钩子函数都携带了参数，其实每一个钩子函数都会传入el和binding两个参数，其中el是指指令绑定的元素，vnode： vue编译生成的虚拟节点，oldVnode: 上一个虚拟节点，binding则表示一个对象，该对象又包含如下属性
name：指令的名字
value: 指令的绑定值
oldValue：指令绑定的前一个值
vm: 拥有该指令的上下文
expression：指令的表达式
arg：指令的参数，如v-tranself:distance中，参数为distance
modifiers：一个包含指令修饰符的对象，如v-tranself.distance.bar中，修饰符对象为distance.bar
descriptor：一个对象，包含指令的解析结果

当指令定义好之后，我们就可以像使用v-on，v-if指令一样使用它了，代码如下：

<cus-tom-button v-tranself="distance"></cus-tom-button>

上面代码的含义是对自定义组件使用tranself属性，并对其赋了一个distance的值

下面我们来通过例子（通过点击放大按钮）来演示一下钩子函数的调用过程

<template>
  <div class="home">
    <cus-tom-button :title='title' v-on:setOnClickListen="setOnClickListen(1)" v-tranself="distance"></cus-tom-button>
  </div>
</template>

<script>
import CusTomButton from '@/view/Button'
export default {
  name: 'BasicActivity',
  components: {
    CusTomButton
  },
  data () {
    return {
      distance: 50,
      title: '自定义指令'
    }
  },
  directives: {
    tranself: {
      bind (el, binding) {
        console.log('自定义指定', 'bind')
        // 只运行一次,用来初始化元素
      },
      inserted () {
        console.log('自定义指定', 'inserted')
        // 被绑定元素插入父节点时，即插入dom时调用（父节点存在即可调用，不必存在于 document 中）
      },
      update (el, binding) {
        console.log('自定义指定', el, binding, binding.value)
        // 当只有更新的时候该方法会被调用
        el.style.transform = `scale(${binding.value / 58})`
      },
      componentUpdated (el, binding) {
        console.log('自定义指定', el, binding)
        // 被绑定元素所在模板完成一次更新周期时调用
      },
      unbind () {
        console.log('自定义指定', 'unbind')
        // 当指令绑定的元素被销毁时,会触发指令的 unbind 事件.
      }
    }
  },
  mounted () {
  },
  methods: {
    setOnClickListen (id) {
      switch (id) {
        case 1:
          this.distance = Math.random() + 100
          break
      }
    }
  }
}
</script>

<style scoped>
</style>

当页面布局完成之后，后台打印如下

自定义指定 bind
自定义指定 inserted

注意：这两个钩子我没有打印el和binding对象，这两个参数可以参考update函数

当我们点击这个按钮，distance值会被动态修改，则update函数会被调用，按钮即被放大，其打印如下
在这里插入图片描述

指令的钩子函数是不是都需要实现？当然不是，我们可以选择实现钩子函数，比较常见的是实现update函数，这里我们也以全局定义指令来举例如何简写

Vue.directive('color-swatch', function (el, binding) {
  el.style.backgroundColor = binding.value
})

yi_master

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Electron + Vue跨平台应用（十四）基础技法（六）

Electron + Vue + Vscode构建跨平台应用（一）知识点补充Electron + Vue + Vscode构建跨平台应用（二）Electron + Vue环境搭建Electron + Vue + Vscode构建跨平台应用（三）利用webpack搭建vue项目Electron + Vue + Vscode构建跨平台应用（四）利用Electron-Vue构建Vue应用详解Electron + Vue + Vscode构建跨平台应用（五）Electron-Vue项目源码分析Electr
复制链接

扫一扫