Maison interface Web js tutoriel Comment écrire un composant personnalisé en utilisant vue

Comment écrire un composant personnalisé en utilisant vue

May 25, 2018 pm 02:52 PM
组件 自定义

Cette fois, je vais vous montrer comment écrire un composant défini personnalisé avec vue. Quelles sont les précautions pour écrire un composant personnalisé avec vue. jetons un coup d'oeil ensemble.

Écrire un composant vue

Ce que j'écris ci-dessous est comment écrire un seul composant de fichier se terminant par .vue, qui est un projet construit basé sur webpack. Si vous ne savez toujours pas comment utiliser webpack pour créer un projet vue, vous pouvez passer à vue-cli.

Un composant vue complet comprendra les trois parties suivantes :

  1. template: template

  2. js: logic

  3. css : Style

Chaque composant a son propre modèle, js et style. Si une page est comparée à une maison, les composants sont le salon, la chambre, la cuisine et les toilettes de la maison. Si la cuisine est démontée séparément, les composants peuvent être des couteaux, des hottes...etc. C'est-à-dire que les pages sont constituées de composants, et les composants peuvent également être constitués de composants. Cela le rend très flexible et présente un couplage très faible.

Regardons d'abord comment un composant est écrit dans un fichier .vue :

Vue.component('simple-counter', {
 template: '<p id="inputBox"><input type="text"></p>',
 data () {   // 数据
 return {
  counter: 0
 }
 },
 methods: {
 // 写点方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
})
Copier après la connexion

À quoi sert le modèle ?

<template>
 <p id="inputBox">
 <input type="text">
 </p>
</template>
<!--
template就是这个组件的html,也就是下面部分(vue-loader会将template标签下的内容解析出来):
-->
<p id="inputBox">
 <input type="text">
</p>
<!--
 对应原生写法的话,就是template内的dom字符串
-->
Copier après la connexion

partie js

export default {
 data () {
 return {
  counter: 0
 }
 },
 methods: {
 // 方法
 },
 created () {
 // 生命钩子
 },
 computed: {
 // 计算属性
 }
}
// 在这里很明显js部分就是对应的原生写法内的非template部分了。
// export default这个是es6的模块写法,不懂的可以先去了解es6的模块化
Copier après la connexion

partie css

<style lang="scss" scoped>
...样式
</style>
Copier après la connexion

<!--Ici, vous pouvez utiliser scss (langage d'extension CSS) tant qu'il est installé" Les deux packages npm "sass-loader" et "node-sass" conviennent très bien, et vue-cli a déjà été configuré avec les paramètres pertinents. Si vous souhaitez utiliser less ou d'autres CSS pour étendre la parole, installez simplement les packages de compilation respectifs. Et scoped signifie que la portée du CSS se situe uniquement sous ce fichier. --->

Introduction

Comment référencer ce composant dans d'autres composants ?

Composant un (button.vue)

&lt;template&gt;
 &lt;p class=&quot;button&quot;&gt;
 &lt;button @click=&quot;onClick&quot;&gt;{{text}}&lt;/button&gt;
 &lt;/p&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
 props: ['text'],   // 获取父组件的传值
 data () {
 return {
 }
 },
 methods: {
 onClick () {
  console.log('点击了子组件')
 }
 }
}
&lt;/script&gt;
&lt;style lang=&quot;scss&quot; scoped&gt;
.button {
 button {
 width: 100px;
 }
}
&lt;/style&gt;
Copier après la connexion

Composant deux (box.vue)

&lt;template&gt;
 &lt;p class=&quot;box&quot;&gt;
 &lt;v-button :text=&quot;text&quot;&gt;&lt;/v-button&gt;    &lt;!--使用组件并传值(text)--&gt;
 &lt;/p&gt;
&lt;/template&gt;
&lt;script&gt;
import Button from './button.vue'  // 引入子组件
export default {
 components: {
 'v-button': Button
 },
 data () {
 return {
  text: '按键的name'
 }
 },
 methods: {
 }
}
&lt;/script&gt;
Copier après la connexion

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 !

Lecture recommandée :

Explication détaillée des étapes pour utiliser scss dans les projets angulaires

Comment utiliser vue2.0 +koa2+mongodb pour implémenter S'inscrire et se connecter

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment configurer rapidement un avatar personnalisé dans Netflix Comment configurer rapidement un avatar personnalisé dans Netflix Feb 19, 2024 pm 06:33 PM

Comment configurer rapidement un avatar personnalisé dans Netflix

Comment personnaliser l'image d'arrière-plan dans Win11 Comment personnaliser l'image d'arrière-plan dans Win11 Jun 30, 2023 pm 08:45 PM

Comment personnaliser l'image d'arrière-plan dans Win11

Comment installer le composant DirectPlay de l'ancienne version de Windows 10 Comment installer le composant DirectPlay de l'ancienne version de Windows 10 Dec 28, 2023 pm 03:43 PM

Comment installer le composant DirectPlay de l'ancienne version de Windows 10

Comment créer et personnaliser des diagrammes de Venn en Python ? Comment créer et personnaliser des diagrammes de Venn en Python ? Sep 14, 2023 pm 02:37 PM

Comment créer et personnaliser des diagrammes de Venn en Python ?

Comment implémenter un middleware personnalisé dans CodeIgniter Comment implémenter un middleware personnalisé dans CodeIgniter Jul 29, 2023 am 10:53 AM

Comment implémenter un middleware personnalisé dans CodeIgniter

Comment activer et personnaliser les fondus enchaînés dans Apple Music sur iPhone avec iOS 17 Comment activer et personnaliser les fondus enchaînés dans Apple Music sur iPhone avec iOS 17 Jun 28, 2023 pm 12:14 PM

Comment activer et personnaliser les fondus enchaînés dans Apple Music sur iPhone avec iOS 17

Comment personnaliser les paramètres des touches de raccourci dans Eclipse Comment personnaliser les paramètres des touches de raccourci dans Eclipse Jan 28, 2024 am 10:01 AM

Comment personnaliser les paramètres des touches de raccourci dans Eclipse

Comment implémenter le composant de calendrier à l'aide de Vue ? Comment implémenter le composant de calendrier à l'aide de Vue ? Jun 25, 2023 pm 01:28 PM

Comment implémenter le composant de calendrier à l'aide de Vue ?

See all articles