Références et méthodes d'accès aux composants dans les documents Vue

Vue est un framework JavaScript qui peut être utilisé pour créer des interfaces utilisateur. Au cœur de Vue se trouve le système de composants, qui vous permet de diviser votre interface utilisateur en parties indépendantes et réutilisables. Cet article présentera les méthodes de référence et d'accès aux composants dans les documents Vue.

Les composants Vue sont des blocs de code réutilisables qui ont leurs propres modèles, logique et styles JavaScript. Les composants Vue peuvent accepter des propriétés et des événements et fournir des options telles que des hooks de cycle de vie.

Dans Vue, il existe deux manières de créer des composants : l'enregistrement global et l'enregistrement local. L'enregistrement global vous permet d'utiliser un composant dans l'ensemble de votre application, tandis que l'enregistrement local permet uniquement d'utiliser un composant dans son composant parent.

Enregistrer les composants globalement :

Dans Vue, vous pouvez enregistrer les composants globalement à l'aide de la méthode Vue.component(). Cette méthode accepte deux paramètres : le nom du composant et l'objet d'options du composant. Voici un exemple simple :

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

Le code ci-dessus définit un composant appelé "mon-composant" et spécifie son modèle. Désormais, ce composant peut être utilisé dans n'importe quelle instance Vue du projet.

Enregistrer les composants localement :

Dans Vue, vous pouvez enregistrer des composants localement à l'aide de l'option composants. Cette option est définie dans l'instance ou le composant Vue. Voici un exemple simple :

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>这是我的组件</div>'
    }
  }
})

Le code ci-dessus définit un composant appelé "mon-composant" et l'enregistre localement dans l'instance Vue à l'aide de l'option composants. Les composants ne sont désormais disponibles que dans l'élément racine d'une instance Vue (#app).

Méthodes d'accès aux composants :

Pour utiliser un composant, vous devez le référencer dans une instance Vue ou le template d'un autre composant. Dans un modèle, vous pouvez utiliser le nom du composant comme nom de balise pour les éléments personnalisés. Par exemple, si vous avez un composant appelé « mon-composant », vous pouvez utiliser le code suivant dans votre modèle :

<my-component></my-component>

Vue remplacera automatiquement mon-composant par le modèle du composant et le remplira avec les options et propriétés du composant.

À l'intérieur d'un composant, vous pouvez accéder à l'instance parent de Vue en utilisant this.$parent ou this.$root. De plus, vous pouvez utiliser des accessoires et des options d'événement dans les options de composants pour transmettre des données et des événements. L'option

props vous permet de transmettre des données aux composants. Dans le composant, ces propriétés sont accessibles via this.propName. Voici un exemple simple :

Vue.component('my-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
})

Dans cet exemple, le composant "my-component" définit une propriété "message" de type string. Dans un composant, vous pouvez utiliser la liaison de modèle pour insérer cette propriété dans le modèle du composant.

<my-component message="Hello World"></my-component>

Dans cet exemple, nous transmettons la chaîne "Hello World" comme attribut de message du composant. Dans le composant, Vue liera cette propriété au modèle correspondant et l'affichera dans le résultat. L'option

event vous permet d'envoyer des événements aux composants. Lorsqu'un composant déclenche des événements, d'autres composants ou instances Vue peuvent capturer ces événements et réagir en conséquence. Voici un exemple simple :

Vue.component('my-component', {
  template: '<button v-on:click="onClick">Click me</button>',
  methods: {
    onClick: function () {
      this.$emit('my-event')
    }
  }
})

var vm = new Vue({
  el: '#app',
  methods: {
    onMyEvent: function () {
      alert('My event was triggered in parent component')
    }
  }
})

Dans cet exemple, le composant "my-component" définit un événement de clic et utilise la méthode this.$emit() pour déclencher un événement personnalisé nommé "my-event". Ensuite, dans l'instance Vue, vous pouvez utiliser la directive v-on pour capturer l'événement personnalisé et déclencher une fonction de rappel.

<my-component v-on:my-event="onMyEvent"></my-component>

Dans cet exemple, nous transmettons un nom de méthode appelé "onMyEvent", qui est appelé lorsque le composant déclenche l'événement "my-event".

Conclusion :

Les composants sont l'un des éléments essentiels des applications Vue qui facilitent la création d'interfaces utilisateur réutilisables et extensibles. Dans le document Vue, les méthodes de référence et d'accès aux composants incluent l'enregistrement global et local, les options d'accessoires et les options d'événement. Comprendre et maîtriser ces technologies peut vous permettre de créer plus facilement des applications Vue.

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!