Résumé des composants globaux de vue

Cette fois, je vais vous apporter un résumé des composants de vue global. Quelles sont les précautions pour le résumé des composants de vue global ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

Les fonctionnalités basées sur les données et les composants sont les deux fonctionnalités les plus importantes de vue.js. La composantisation vise à faciliter la réutilisation du code et à améliorer l'efficacité du développement. Il existe quatre manières courantes d'écrire des composants Vue, chacune avec ses propres caractéristiques et adaptée à différents scénarios.

1. Structure du composant global

 :

// 组件的注册 、
Vue.component( 'componentName', { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
// 组件的使用 
new Vue({ 
 el: '#app' 
})

définie via Vue.component() dans la balise de script. Un composant global et applique le composant à la balise avec l'application id dans le fichier html via la nouvelle instance Vue().

Fonctionnalités :

<1> peut être directement défini et utilisé dans la balise de script du fichier html

<2> Les composants définis par cette méthode sont des composants globaux et peuvent être utilisés dans n'importe quelle instance de Vue. Ils conviennent à des scénarios de projet relativement simples

<3> défini. Et les noms des composants ne peuvent pas être les mêmes ;

Exemple :

Composant de bienvenue

2. Composant local

🎜>

// 构造组件对象 
const componentName = { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
// 组件的使用 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

Structure :

Définissez un objet composant dans la balise de script et enregistrez le composant via l'attribut composants dans l'instance Vue.

Caractéristiques :

<1> Semblables aux composants définis globalement, les composants peuvent être écrits et utilisés directement dans la balise de script du fichier html ; 🎜><2> Ce composant ne peut être utilisé que dans une instance Vue enregistrée

Instance :

Composant de bienvenue

3. Utilisez la balise template

Structure :

<template id="componnet"> 
 // 组件的html结构 
</template> 
// 全局组件的注册与使用 
Vue.component( 'componentName', { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
new Vue({ 
 el: '#app' 
}) 
// 局部组件的注册与使用 
const componentName = { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

Utilisez la balise template pour écrire la structure html dans le composant à l'intérieur de la balise body, dans Register et utilisez des composants globaux et des composants locaux dans les balises de script. La différence est que l'attribut template du composant est référencé par id.

Caractéristiques :

<1> Le fichier js ne contient pas de contenu de structure HTML, ce qui permet de séparer la structure et la logique

Exemple :

Composant de bienvenue

4. Composant à fichier unique

Structure :

<template lang="html"> 
 // 组件中的html结构 
</template> 
<script> 
 //组件的逻辑 
 export default { 
 // 组件的属性和方法 
 } 
</script> 
<style lang="css" scoped> 
 // 组件的样式 
</style>

Créez un fichier avec le suffixe vue et le nom du fichier est le nom du composant. Le composant contient trois parties : la structure html, la logique js et le style css, qui correspondent à différentes balises. Lorsque vous utilisez des composants, vous pouvez les utiliser en les important.

Caractéristiques :

<1> Les composants ne s'affectent pas les uns les autres et ont une grande réutilisabilité, et leur code HTML, CSS et JS peuvent tous être réutilisés ; >

<2> La structure et la logique des composants sont claires

<3> Convient aux projets de grande envergure et complexes, adaptés au développement de plusieurs personnes ; >Exemple :

Composant de bienvenue

 ! ! ! Il est à noter que : la balise modèle doit envelopper toutes les balises avec une seule balise, sinon une erreur sera signalée

Écriture correcte :

Écriture incorrecte :

<template> 
 <p> 
 <p></p> 
 ...... 
 <p></p> 
 </p> 
</template>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

<template> 
 <p></p> 
 <p></p> 
 ...... 
 <p></p> 
</template>

Lecture recommandée :

Le fonctionnement de vue2.0 est actif et les autres options s'excluent mutuellement

Pourquoi les données ne peuvent-elles pas être enregistré après l'actualisation de la page vuex ?

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!