Maison > Article > interface Web > Explication détaillée de l'utilisation des composants dans Vue.js

Explication détaillée de l'utilisation des composants dans Vue.js

php中世界最好的语言original: 2018-04-13 09:27:111522parcourir

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des composants dans Vue.js. Quelles sont les précautions lors de l'utilisation des composants dans Vue.js. Voici des cas pratiques, jetons un coup d'œil.

Introduction

Les composants Vue.js sont très importants lors de l'utilisation de Vue.js. Dans ce didacticiel, nous approfondirons les composants Vue.js, comprendrons les bases et les appliquerons à votre application. Commençons.

Que sont les composants ?

Les composants nous permettent de diviser des applications complexes en petits morceaux. Par exemple, une application Web typique comportera des sections telles que l’en-tête, la barre latérale, le contenu et le pied de page.

Vue.js nous permet de diviser chaque partie en code modulaire distinct appelé composants. Ces composants peuvent être étendus puis attachés à l'application sur laquelle vous travaillez. L'utilisation de composants est un excellent moyen de réutiliser le code tout au long de l'écriture de votre application.

Supposons que vous disposiez d’une application de blog et que vous souhaitiez afficher une colonne d’articles de blog. En utilisant les composants Vue, vous pouvez faire :

<blog-post></blog-post>

Vue s'occupe du reste.

Créez une page HTML simple qui monte une instance Vue sur un élément DOM. Vous l'utiliserez pour en savoir plus sur les composants. Voici un exemple de page HTML :

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app"></p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
  // A new Vue instance is created and mounted to your p element
  new Vue({
   el: '#app',
   data: {
   domain: 'Tutsplus'
   },
   template: '<p>Welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

Ci-dessus, vous avez créé une instance Vue simple sans aucun composant dans le code. Maintenant, si vous souhaitez que le message de bienvenue apparaisse deux fois, que faites-vous ?

Vous supposez probablement que p apparaisse deux fois là où l'instance Vue est montée. Cela ne fonctionnera pas. Essayez de le changer d'identifiant en classe et vous obtiendrez :

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p class="app"></p>
 <p class="app"></p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
  // A new Vue instance is created and mounted to your p element
  new Vue({
   el: '.app',
   data: {
   domain: 'Tutsplus'
   },
   template: '<p>Welcome to {{ domain }}</p>
  });
 </script>
</body>
</html>

Ça ne marchera toujours pas !

La seule façon de résoudre ce problème est de créer un composant. Comment créer un composant ?

Les composants sont créés à l'aide du constructeur Vue.component（） . Ce constructeur prend deux paramètres : le nom de votre composant (également appelé nom de balise) et un objet contenant les options du composant.

Créons un composant en utilisant le contenu ci-dessus.

Vue.component('welcome-message', {
  data: function() {
  return {
   domain: 'Tutsplus'
  }
  },
  template: '<p>Welcome to {{ domain }}</p>'
 })

Ci-dessus, le nom du composant s'appelle welcome-message. Votre composant peut porter le nom de votre choix. Mais il est important de noter que ce nom n'affecte aucune balise HTML car vous ne souhaitez pas le remplacer.

L'objet options transmis au constructeur contient des données et des modèles. Lors de la création d'un composant, vos données doivent être une fonction, comme vu ci-dessus. Les données enregistrées doivent être renvoyées sous forme d'objet.

Lorsqu'il n'y a aucune donnée à transmettre, transmettez le modèle suivant :

 Vue.component('welcome-message', {
  template: '<p>Welcome to Tutsplus</p>'
 })

Une fois cela fait, le composant peut être utilisé dans votre application en le traitant comme un élément HTML normal en utilisant le nom transmis au constructeur. Il s'appelle ainsi : <welcome-message> </ welcome-message>.

Pour afficher le modèle plusieurs fois, vous pouvez appeler le composant autant de fois que nécessaire, comme indiqué ci-dessous.




VueJs Components


 
 
 
 
 
 
 
 
 
 
 <script>
 Vue.component('welcome-message', {
  data: function() {
  return {
   domain: 'Tutsplus'
  }
  },
  template: '&lt;p&gt;Welcome to {{ domain }}&lt;/p&gt;'
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: '#app'
 });
 </script>

En conséquence, le message de bienvenue sera affiché quatre fois.

Stocker les données dans le composant

Ci-dessus, j'ai mentionné que les données doivent être une fonction et que les informations qu'elles contiennent doivent être renvoyées sous forme d'objet. Pourquoi est-ce ?

Lorsque les données renvoyées ne sont pas un objet, les composants utilisant les données partagent la même source : les données partagées. Par conséquent, les modifications de données dans un composant affecteront un autre composant. Ce n'est pas la même chose lorsque les données sont renvoyées sous forme d'objet.

Il est important de voir comment cela fonctionne réellement. Examinons d’abord le cas où les données sont renvoyées sous forme d’objet.

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 var data = { name: 'Henry' }
 
 Vue.component('welcome-message', {
  data: function() {
  return data
  },
  template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>',
  methods :{
   changeName: function() {
   this.name = 'Mark'
   }
  }
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: '#app'
 });
 </script>
</body>
</html>

Pouvez-vous deviner ce qui se passe ci-dessus ?

Il existe deux composants, et les deux composants partagent la même source de données car les données ne sont pas renvoyées sous forme d'objet. Comment prouvez-vous que j'ai raison ? Lorsque vous consultez la page ci-dessus à partir d'un navigateur, vous verrez que les modifications apportées à un composant entraînent la modification des données d'un autre composant. Alors à quoi devrait-il ressembler ?

Comme ça :

<!DOCTYPE html>
<html>
<head>
<title>VueJs Components</title>
</head>
<body>
 <!-- p where Vue instance will be mounted -->
 <p id="app">
 <welcome-message></welcome-message>
 <welcome-message></welcome-message>
 </p>
 
 <!-- Vue.js is included in your page via CDN -->
 <script src="https://unpkg.com/vue"></script>
 <script>
 
 Vue.component('welcome-message', {
  data: function() {
  return {
   name: 'Henry'
  }
  },
  template: '<p>Hello {{ name }}, welcome to TutsPlus (<button @click="changeName">Change Name</button>)</p>',
  methods :{
   changeName: function() {
   this.name = 'Mark'
   }
  }
 })
 
 // A new Vue instance is created and mounted to your p element
 new Vue({
  el: '#app'
 });
 </script>
</body>
</html>

Les données ici sont renvoyées sous forme d'objet et les modifications apportées à un composant n'affecteront pas un autre composant. Cette fonction est réalisée pour un seul composant. Il est important de ne pas l'oublier lors de la création de votre application.

Créer et utiliser des composants

使用到目前为止学到的内容，让我们使用 vue -cli 从头开始一个新的Vue.js项目来实现它。如果你的机器上没有安装 vue -cli ，你可以通过运行：

npm install -g vue-cli

开始你的新的Vue.js项目：

vue init webpack vue-component-app

导航到你的应用程序，安装依赖关系，并使用下面的命令运行你的开发服务器。

cd vue-component-app
npm install
npm run dev

首先，你将重命名HelloWorld组件，这个组件是你将应用程序初始化为Hello.vue时创建的组件。然后你将注册这个组件作为一个全局组件在你的应用程序中使用。

所以你的Hello组件应该看起来像这样。

#src/components/Hello.vue
<template>
 <p class="hello">
 <p>Welcome to TutsPlus {{ name }}</p>
 <hr>
 <button @click="changeName">Change Display Name</button>
 </p>
</template>
<script>
export default {
 name: 'Hello',
 data () {
 return {
  name: 'Henry'
 }
 },
 methods: {
 changeName () {
  this.name = 'Mark'
 }
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

你有欢迎文本显示欢迎消息和作为数据传递的名称。当点击欢迎消息下方的按钮时，将调用changeName方法。名字将从亨利改为马克。

要全局使用此组件，必须被注册。你能猜到应该在哪里完成这个操作吗？如果你说main.js，恭喜你，答对了！

要注册一个组件，可以导入它，然后使用Vue.component（）构造函数进行设置。自己动手试试。

我敢打赌，这个对你来说小菜一碟。以下是main.js文件中的内容。

#src/main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Home from './components/Hello'
Vue.config.productionTip = false
Vue.component('display-name', Home)
/* eslint-disable no-new */
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App }
})

这里除了导入你的Hello组件的那一行之外，没有什么新东西。然后使用构造函数注册该组件。最后，对于这部分，组件需要使用你输入的组件名称来显示。在这种情况下，组件是显示名称。这将在你的App.vue文件中完成。

打开src / App.vue并使其看起来像这样。

#src/App.vue
<template>
<p id= "app" >
<display-name/>
</p>
</template>
<script>
export default {
}
</script>
<style>
#app {
font-family: 'Avenir' , Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

打开服务器，打开http：// localhost：8080。点击按钮，名称应该改变。

我们来看看如何在本地使用一个组件。

在组件目录中创建一个名为Detail.vue的文件。这个组件不会做任何特殊的事情 - 它将被用在Hello组件中。

使你的Detail.vue文件就像这样。

#src/components/Detail.vue
<template>
 <p class="hello">
 <p>This component is imported locally.</p>
 </p>
</template>
<script>
export default {
 name: 'Detail'
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

要在Hello组件中使用它，可以像导入Hello组件一样将其导入。接下来，把它注册，但这次你不需要使用Vue.component（）构造函数。

你可以使用导出内的组件对象进行注册。将用作元素标记的组件的名称必须作为值传递给对象。完成后，你现在可以使用元素标记来输出组件。

为了理解这一点，Hello组件应该长这样：

#src/components/Hello.vue
<template>
 <p class="hello">
 <p>Welcome to TutsPlus {{ name }}</p>
 <hr>
 <button @click="changeName">Change Display Name</button>
 <!-- Detail component is outputted using the name it was registered with -->
 <Detail/>
 </p>
</template>
<script>
// Importation of Detail component is done
import Detail from './Detail'
export default {
 name: 'HelloWorld',
 data () {
 return {
  name: 'Henry'
 }
 },
 methods: {
 changeName () {
  this.name = 'Mark'
 }
 },
 /**
 * Detail component gets registered locally.
 * This component can only be used inside the Hello component
 * The value passed is the name of the component
 */
 components: {
 Detail
 }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
ul {
 list-style-type: none;
 padding: 0;
}
li {
 display: inline-block;
 margin: 0 10px;
}
a {
 color: #42b983;
}
</style>

刷新页面以查看新页面。

范围组件样式

Vue.js允许你为组件提供全局和本地样式。是什么意思呢？在某些情况下，你希望组件中的某些元素与另一个组件中的对应元素的样式不同。Vue.js能够帮助你。

一个很好的例子是你刚刚建立的小应用程序。App.vue中的样式是全局的; 这怎么可能？打开你的App.vue，风格部分看起来像这样。

<style>
#app {
 font-family: 'Avenir', Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

这与Detail.vue不同，看起来像这样。

<style scoped>
h1, h2 {
 font-weight: normal;
}
 
ul {
 list-style-type: none;
 padding: 0;
}
 
li {
 display: inline-block;
 margin: 0 10px;
}
 
a {
 color: #42b983;
}
</style>

将 scoped 添加到样式标签是造成这个差别的原因。尝试通过删除 scoped 来编辑一种组件样式，你会看到这是如何运作的。

结论

虽然这个文章有点长，但是我相信你会喜欢它。

现在你知道如何有效地使用组件，并且了解如何在现有应用程序中构建组件。在使用vue-cli时，你还可以在本地和全局范围内创建和使用组件。当你想为一个组件使用特定的风格时，你已经看到了如何使用scoped来做到这一点。

你现在可以继续构建使用组件的复杂Vue.js应用程序。了解Vue.js允许你重用代码，你的页眉，页脚，登录面板和搜索栏可以用作组件。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Articles Liés

Voir plus