Introduction aux méthodes d'appel et de montage de méthodes globales dans la documentation Vue

Vue.js est un framework JavaScript populaire qui fournit de nombreuses méthodes et propriétés globales permettant aux développeurs d'exploiter facilement les applications Vue.js. Cet article présentera les méthodes globales d'appel et de montage de méthodes dans le document Vue.js pour aider les développeurs à mieux utiliser ce framework.

Appel de méthode globale

Dans Vue.js, les méthodes globales font référence aux méthodes définies sur la fonction constructeur Vue. Ces méthodes peuvent être appelées depuis n'importe où dans l'application sans instancier un objet Vue. Les méthodes globales sont divisées en deux types : montées et non montées.

Méthodes globales non montées

Vue.extend(options)

La méthode Vue.extend() permet de définir un constructeur de sous-composant et de renvoyer cette fonction constructeur. L'objet options transmis correspond aux options du composant, y compris les données du composant, les méthodes, les calculs, la surveillance, la fonction de cycle de vie et d'autres options.

Utilisez la méthode Vue.extend() pour définir le constructeur du composant :

var MyComponent = Vue.extend({
  template: '<div>这是一个组件</div>'
})

Vue.nextTick(callback)

Exécutez la fonction de rappel après que Vue ait mis à jour le DOM. Le this de la fonction de rappel pointe vers l'objet instance. Cette méthode renvoie un objet Promise.

Utilisez la méthode Vue.nextTick() :

Vue.nextTick(function () {
  // 操作 DOM
})

Vue.set(target, key, value) et Vue.delete(target, key)

Vue.set() ajoutera en réponse une propriété au milieu de l'objet cible . La méthode Vue.delete() supprimera de manière réactive une propriété de l'objet cible.

Utilisez les méthodes Vue.set() et Vue.delete() :

Vue.set(vm.someObject, 'b', 2)
Vue.delete(vm.someObject, 'a')

Vue.directive(id, [definition])

Définissez les directives globales.

Utilisez la méthode Vue.directive() :

Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
    // 操作 DOM
  }
})

Méthodes globales montées

Vous pouvez monter des méthodes globales sur Vue.prototype ou Vue en appelant certaines méthodes de l'objet Vue.

Vue.use(plugin)

Installez le plugin Vue.js.

Utilisez la méthode Vue.use() :

// 引入插件
import myPlugin from './my-plugin'

// 安装插件
Vue.use(myPlugin)

Vue.mixin(mixin)

Définissez un mixin global qui fusionne les options du mixin dans chaque instance de Vue.

Utilisez la méthode Vue.mixin() :

Vue.mixin({
  created: function () {
    console.log('全局混入')
  }
})

Vue.component(id, [definition])

Définissez les composants globaux.

Utilisez la méthode Vue.component() :

Vue.component('my-component', {
  template: '<div>这是一个组件</div>'
})

Montage de la méthode globale

En plus de monter la méthode globale sur Vue.prototype ou Vue, vous pouvez également la monter sur l'objet instance, afin de pouvoir utiliser la méthode globale méthode au sein de la méthode des composants.

Utilisez la méthode Vue.mixin() pour monter des méthodes globales sur des instances de composant, ou utilisez des méthodes ou des attributs calculés dans les options de composant pour appeler des méthodes globales.

Vue.mixin implémente les méthodes globales de montage

var myGlobalMethod = function () {
  // 全局方法
}

Vue.mixin({
  created: function () {
    this.myGlobalMethod = myGlobalMethod
  }
})

et appelle les méthodes globales dans

methods: {
  doSomething() {
    this.myGlobalMethod()
  }
}

computed

computed: {
  computedProperty() {
    return this.myGlobalMethod()
  }
}

Summary

Vue.js fournit de nombreuses méthodes et attributs globaux qui permettent aux développeurs d'utiliser facilement l'application. Les méthodes globales sont divisées en deux types : les méthodes globales montées et non montées peuvent être utilisées directement dans les composants. Grâce à la méthode Vue.mixin(), les méthodes globales peuvent être montées sur l'objet instance, ou les méthodes globales peuvent être appelées à l'aide des méthodes et des attributs calculés dans les options du composant. L'utilisation de méthodes globales peut améliorer l'efficacité du développement, mais vous devez faire attention à la lisibilité et à la maintenabilité du code pour éviter d'abuser des méthodes globales.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!