Comment écrire un composant personnalisé en utilisant vue

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: {
 // 计算属性
 }
})

À 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字符串
-->

partie js

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

partie css

<style lang="scss" scoped>
...样式
</style>

<!--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)

<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>

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>

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!