vue中的几个高级概念

最新推荐文章于 2023-02-21 12:13:27 发布

yyds2026

最新推荐文章于 2023-02-21 12:13:27 发布

阅读量133

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/yyds2026/article/details/127845197

版权

本文详细介绍了Vue.js的高级特性，包括混入（mixins）的概念、全局与局部使用，以及混入可能带来的问题。接着探讨了自定义指令的创建与使用，包括钩子函数及其参数。此外，还讲解了Vue中的过滤器（filter）和过渡效果，如何在组件中定义和应用过渡类名，以及JavaScript钩子的使用。

摘要由CSDN通过智能技术生成

混入mixins

官方解释

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

简单的来说就是 Mixins 是我们可以重用的代码块，在实际开发中，如果有些代码重复性比较高，这时候可以考虑 Mixins 这个特性。

简单的mixin示例

export default {
   
  data() {
   
    return {
   
      name: '来自mixin的name',
      arr: [
        1,
        {
   
          arrName: '来自mixin',
          arrMixin: '来自mixin'
        },
        1233
      ],
      obj: {
    name: '来自mixin', value: '来自mixin', mixin: '只有mixin才有的字段' }
    }
  },
  created() {
   
    console.log('我是mixin的created---')
  },
  mounted() {
   
    console.log('我是mixin的mounted---')
    this.getInfo()
  },
  methods: {
   
    getInfo() {
   
      console.log('我是mixin, getInfo:', this.name)
      console.log('我是mixin的obj:', this.obj)
      console.log('我是mixin的arr:', this.arr)
    }
  }
}

组件中使用

import mixinDemo from './mixin.js'
export default {
   
  name: '',
  mixins: [mixinDemo],
  components: {
   },
  data() {
   
    return {
   
      name: '组件中的name',
      arr: [
        2,
        {
   
          arrName