Comment écrire des composants dans vue

Cette fois, je vais vous montrer comment écrire des composants dans Vue, et quelles sont les précautions lors de l'écriture de composants dans Vue Voici un cas pratique, jetons un oeil.

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

Présentation de

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 de l'utilisation de l'actualisation à chaud et du chargement à chaud du webpack

Explication détaillée du fractionnement du code étapes d'optimisation du packaging 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!