Maison > interface Web > js tutoriel > le corps du texte

Comment écrire un composant personnalisé en utilisant vue

php中世界最好的语言
Libérer: 2018-05-25 14:52:16
original
1924 Les gens l'ont consulté

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

Introduction

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

Composant un (button.vue)

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

Composant deux (box.vue)

<template>
 <p class="box">
 <v-button :text="text"></v-button>    <!--使用组件并传值(text)-->
 </p>
</template>
<script>
import Button from './button.vue'  // 引入子组件
export default {
 components: {
 'v-button': Button
 },
 data () {
 return {
  text: '按键的name'
 }
 },
 methods: {
 }
}
</script>
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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!