Description détaillée des puissants composants Vue.js

Cet article présente principalement la description détaillée des puissants composants Vue.js Les composants sont l'une des fonctions les plus puissantes de Vue.js. Les amis intéressés peuvent s'y référer

<.>Que sont les composants : Les composants sont l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre l'élément HTML pour encapsuler du code réutilisable. À un niveau élevé, un composant est un élément auto-défini auquel le compilateur de Vue.js ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également se présenter sous la forme d'éléments HTML natifs, étendus avec l'attribut is.

Comment enregistrer un composant ?
Vous devez utiliser la méthode Vue.ext

end

pour créer un composant, puis utiliser la méthode Vue.component pour enregistrer le composant. Le format de la méthode Vue.extend est le suivant :

Si vous souhaitez utiliser ce composant créé ailleurs, vous devez nommer le composant :

var MyComponent = Vue.extend({
 // 选项...后面再介绍
})

Vue.component ('my -component', MyComponent)

Après l'avoir nommé, vous pouvez utiliser le nom du composant dans la

balise HTML

, tout comme si vous utilisiez un élément DOM. Jetons un coup d'œil à un exemple complet d'enregistrement et d'utilisation de composants.
Code HTML :

Code js :

<p id="example">
 <my-component></my-component>
</p>

Résultat de sortie :

// 定义
var MyComponent = Vue.extend({
 template: &#39;<p>A custom component!</p>&#39;
})

// 注册
Vue.component(&#39;my-component&#39;, MyComponent)

// 创建根实例
new Vue({
 el: &#39;#example&#39;
})

 <p id="example">
 <p>A custom component!</p>
</p

Composants imbriqués
Le composant lui-même peut également contenir des composants. Le composant parent ci-dessous contient un composant nommé composant-enfant, mais ce composant ne peut être utilisé que par le composant parent :

Le processus de définition ci-dessus est relativement lourd, et vous n'avez pas besoin d'appeler les méthodes Vue.component et Vue.extend à chaque fois :

var child = Vue.extend({
 template: &#39;<p>A custom component!</p>&#39;
});
var parent = Vue.extend({

 template: &#39;<p>Parent Component: <child-component></child-component></p>&#39;,
 components: {
 &#39;child-component&#39;: child
 }
});
Vue.component("parent-component", parent);

// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: &#39;<p>A custom component!</p>&#39;
})

// 局部注册也可以这么做
var Parent = Vue.extend({
 components: {
 &#39;my-component&#39;: {
  template: &#39;<p>A custom component!</p>&#39;
 }
 }
})

Composant dynamique
Plusieurs composants peuvent utiliser le même point de montage, puis basculer entre eux de manière dynamique. Utilisez l'élément réservé et liez-le dynamiquement à son attribut is. L'exemple ci-dessous comporte trois composants : home, posts et archive sous la même instance de vue, et l'affichage des composants est commuté dynamiquement via la fonctionnalité

current

View.
code html :

code js :

<p id="dynamic">
 <button id="home">Home</button>
 <button id="posts">Posts</button>
 <button id="archive">Archive</button>
 <br>
 <component :is="currentView"></component>
</p>

composant et v-

var vue = new Vue({
 el:"#dynamic",
 data: {
 currentView: "home"
 },
 components: {
 home:{
  template: "Home"
 },
 posts: {
  template: "Posts"
 },
 archive: {
  template: "Archive"
 }
 }
});
document.getElementById("home").onclick = function(){
vue.currentView = "home";
};
document.getElementById("posts").onclick = function(){
vue.currentView = "posts";
};
document.getElementById("archive").onclick = function(){
vue.currentView = "archive";
};

pour

Impossible de transmettre des données au composant car la portée du composant est indépendante. Afin de transmettre des données au composant, des accessoires doivent être utilisés :

v-for="item in items"

:item="item"
 : index="$ index">

La raison pour laquelle l'élément n'est pas automatiquement injecté dans le composant est que cela entraînera un couplage étroit du composant avec le courant v-pour. Déclarer explicitement d'où proviennent les données permet aux composants d'être réutilisés dans

d'autres

endroits.

Principe de réactivité en profondeur

Lorsqu'un composant lie des données, comment la liaison peut-elle être efficace et peut être modifiée et ajoutée dynamiquement

Attribut

? Jetez un œil à l'introduction du principe ci-dessous.
Comment suivre les modifications : transmettez un

objet

différent à l'instance de vue comme option de données, vue.js parcourra ses propriétés, en utilisant Object. DefineProperty le convertit en getter/setter. Il s'agit d'une fonctionnalité ES5 et tous les vues.js ne prennent pas en charge IE8 ou version antérieure.
Chaque instruction/

liaison de données

dans le modèle a un objet observateur correspondant, qui enregistre les propriétés en tant que dépendances pendant le processus de calcul. Plus tard, lorsque le passeur dépendant est appelé, l'observateur sera invité à recalculer. Le processus est le suivant :

Problème de détection de changement : vue.js ne peut pas détecter l'ajout ou la

suppression d'attributs d'objet

, les attributs doivent être dans les données Ce n'est qu'en faisant cela que vue.js peut le convertir en getter/settermode pour répondre. Par exemple :

Cependant, il existe également un moyen d'ajouter des propriétés après la création de l'instance et de la rendre pertinente. Vous pouvez utiliser la méthode d'instance set(

var data = { a: 1 };
var vm = new Vue({
data: data
});
// `vm.a` 和 `data.a` 现在是响应的
vm.b = 2
// `vm.b` 不是响应的
data.b = 2
// `data.b` 不是响应的

key

,value) :
vm set('b', 2)

// `vm.b` et `. data.b` est désormais réactif

对于普通对象可以使用全局方法：Vue.set(object, key, value)：
Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的 

初始化数据：尽管Vue.js提供动态的添加相应属性，还是推荐在data对象上声明所有的相应属性。

不这么做： 

var vm = new Vue({
 template: &#39;<p>{{msg}}</p>&#39;
})
// 然后添加 `msg`
vm.$set(&#39;msg&#39;, &#39;Hello!&#39;)

应该这么做： 

var vm = new Vue({
 data: {
 // 以一个空值声明 `msg`
 msg: ''
 },
 template: &#39;<p>{{msg}}</p>&#39;
})
// 然后设置 `msg`
vm.msg = &#39;Hello!&#39;

组件完整案例
下面介绍的例子实现了模态窗口功能，代码也比较简单。

html代码：

<!-- 实现script定义一个模板 -->
<script type="x/template" id="modal-template">
 <!--模板是否显示通过v-show="show"来设置， transition设置动画效果-->
 <p class="modal-mask" v-show="show" transition="modal">
 <p class="modal-wrapper">
  <p class="modal-container">
  <p class="modal-header">
   <!--slot 相当于header占位符-->
   <slot name="header">
   default header
   </slot>
  </p>
  <p class="modal-body">
   <!--slot 相当于body占位符-->
   <slot name="body">
   default body
   </slot>
  </p>
  <p class="modal-footer">
   <!--slot 相当于footer占位符-->
   <slot name="footer">
   default footer
   </slot>
   <button class="modal-default-button" @click="show = false">OK</button>
  </p>
  </p>
 </p>
 </p>
</script>
<p id="app">
 <!--点击按钮时设置vue实例特性showModal的值为true-->
 <button id="show-modal" @click="showModal = true">show modal</button>
 <!--modal是自定义的一个插件，插件的特性show绑定vue实例的showModal特性-->
 <modal :show.sync="showModal">
 <!--替换modal插件中slot那么为header的内容-->
 <h3 slot="header">Custom Header</h3>
 </modal>
</p>

 js代码： 

//定义一个插件，名称为modal
Vue.component("modal", {
 //插件的模板绑定id为modal-template的DOM元素内容
 template: "#modal-template",
 props: {
 //特性，类型为布尔
 show:{
  type: Boolean,
  required: true,
  twoWay: true
 }
 }
});
//实例化vue，作用域在id为app元素下，
new Vue({
 el: "#app",
 data: {
 //特性，默认值为false
 showModal: false
 }
});

css代码： 

.modal-mask {
 position: fixed;
 z-index: 9998;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, .5);
 display: table;
 transition: opacity .3s ease;
}

.modal-wrapper {
 display: table-cell;
 vertical-align: middle;
}

.modal-container {
 width: 300px;
 margin: 0px auto;
 padding: 20px 30px;
 background-color: #fff;
 border-radius: 2px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
 transition: all .3s ease;
 font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
 margin-top: 0;
 color: #42b983;
}

.modal-body {
 margin: 20px 0;
}

.modal-default-button {
 float: right;
}

/*
* the following styles are auto-applied to elements with
* v-transition="modal" when their visiblity is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/

.modal-enter, .modal-leave {
 opacity: 0;
}

.modal-enter .modal-container,
.modal-leave .modal-container {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}

相关文章：

通过纯Vue.js构建Bootstrap组件

Vue.js环境搭建教程介绍

超全面的vue.js使用总结

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!