Enregistrer les composants, utiliser les composants (tous les projets sont écrits en composant)
Pourquoi utiliser des composants : les composants peuvent être réutilisés, chaque composant est indépendant, les modèles, les données, les styles css ne s'affectent pas les uns les autres
-
Composant de composant enregistré globalement : n'abusez pas du composant global inx car les composants globaux entraîneront une pollution du nom du composant
-
Vue2 : Vue.component("nom du composant", { } ) composant global
-
-
Vue3 : app.component("nom du composant", { } ) composant global
-
-
vue3 : Composants du composant d'enregistrement partiel
-
<div id="app">
<my-header></my-header>
</div>
</html>
<script src="./lib/vue.global.js"></script>
<script>
let app = Vue.createApp({
data () {
return {
}
},
components: { // 局部组件的注册
// 组件的名字：对象形式的配置项
'my-header':{
template:`<div>{
{msg}}</div>`,
data() {
return {
msg:"子组件"
}
},
}
}
})
app.mount("#app")
</script>Passage de paramètres de composant : résoudre le problème que les données ne peuvent pas être partagées entre les composants (principe du flux de données à sens unique)
-
Vue suit un flux de données à sens unique, et le flux de données va du parent à l'enfant. Lorsque les données du composant parent changent, les données dans les accessoires sont mises à jour immédiatement.
-
accessoires : passer du parent à l'enfant (attribut en lecture seule) : le composant parent doit transmettre des valeurs via des propriétés personnalisées sur le composant enfant, et le composant enfant reçoit la valeur via des accessoires à l'intérieur (vérification des accessoires)
-
Le composant enfant du parent v-bind (attribut personnalisé) lie le style d'attribut et la valeur de l'attribut correspond aux données du parent transmises au composant enfant
-
Définissez un accessoire dans l'enfant pour recevoir le nom de la propriété du lieu
-
Toutes les données sur les props reçues sont utilisables directement sur le template du sous-composant, ou dans l'option (pensez à apporter ceci) à savoir : méthodes, montre, calculée
-
eg：：： 1.父组件传递 （也可以自定义属性传值 :xiaoming=""） <ZiCom xiaoming="我是传递的数据a" xiaohong='我是传递的第二个b'/> 2.子组件设置接收 props，直接使用 export default // 1.使用props定义接收参数 props:["xiaoming","xiaohong"] }validation des accessoires :
-
<!-- 父传子 --> <div id="app"> { {fMsg}} <!-- 子组件 --> <my-kun :title="fMsg" :hei="list[0].title" :num="list[0].price"></my-kun> </div> </html> <script src="./lib/vue.global.js"></script> <script> let app = Vue.createApp({ data() { return { fMsg: '父的数据在此', list: [{ title: '小黑子', price: 5 }, { title: '坤坤', price: 5 }, { title: '凡凡', price: 5 }] } } }) app.component('myKun', { template: `<div> { {zMsg}}-----{ {title}}-----{ {hei}}-----{ {num}} </div>`, // props: ['title','hei','num'], props: { 'title': [String], 'hei': String, // 自定义类型校验函数 'num': { validator(value) { // The value must match one of these strings return ['你好', '不好',5].includes(value) } }, }, data() { return { zMsg: '爱坤才会赢' } } }) app.mount('#app') </script>
-
-
émet : passe de l'enfant au parent (événement de surveillance) : le composant parent doit lier un événement personnalisé au composant enfant, et le composant enfant déclenche l'événement et transmet la valeur via $emit (peut émettre un effet)
- Événement de liaison de composant parent et enfant @myclick="fuMethod"
- Utilisez la méthode fuMethod( val ){ } dans les méthodes du parent. Utilisé pour recevoir les données transmises par l'enfant et faire le traitement
- Le nom de l'événement myclick doit être reçu dans le sous-composant, lier la méthode, puis l'utiliser (ou l'utiliser directement), puis l'utiliser de deux manières : la première : émet : ['myClick'],
// méthodes de réception :{ ziMethod (){ this.$emit('myclick', this.zMsg) } }, utilisé en html : @click="ziMethods" La seconde : après réception, utilisez <button @click="$emit
( ' directement en html someEvent')">click me</button> - - Receive dans le parent, et la méthode fuMethod dans les méthodes effectue le traitement de réception. Après traitement, selon : Selon le principe du flux de données unidirectionnel, la vue est également mise à jour automatiquement
- composant parent
<template> <div> fufuf <!-- 3.绑定自定义事件 --> <!-- <ZiCom @自定义事件=“函数”/> --> <ZiCom @xiaoming="demo"/> </div> </template> <script> import ZiCom from "./ZiCom.vue" export default { components:{ ZiCom }, methods:{ // 4定义函数 并且接收自定义事件上面的数据 demo(val){ console.log(val) } } } </script>Sous-ensemble
-
<template> <div> zizi <!-- 1.逆向传值必须必须必须要使用事件来触发 --> <button @click="fun()">点我把数据给父组件</button> </div> </template> <script> export default { data(){ return { zitext:"我是子组件的数据么么哒！！！！！" } }, methods:{ fun(){ // 2.自定义事件 携带我们子组件的数据 // this.$emit("给自定义事件起个名字",你传递的数据) this.$emit("xiaoming",{a:this.zitext}) } } } </script> -
<!-- 父传子 --> <div id="app"> { {fMsg}} <!-- 子组件 --> <my-kun @myclick="fuMethod"></my-kun> </div> </html> <script src="./lib/vue.global.js"></script> <script> let app = Vue.createApp({ data() { return { fMsg: '父的数据在此', list: [{ title: '小黑子', price: 5 }, { title: '坤坤', price: 5 }, { title: '凡凡', price: 5 }] } }, methods: { fuMethod(msg) { console.log(111); this.fMsg = msg } } }) app.component('myKun', { template: `<div> { {zMsg}} <button @click="ziMethod">哈哈</button> </div>`, // 直接写template中 // <button @click="$emit('someEvent')">click me</button> // emits:["myclick"], emits: { // click: null, // 校验 submit 事件 'myclick': (payload) => { if (payload) { return true } else { console.warn('忘记传参了') return false } } }, data() { return { zMsg: '爱坤才会赢' } }, methods: { ziMethod() { this.$emit('myclick', this.zMsg) } } }) app.mount('#app') </script>
-
Valeur de passage du composant frère :
Instancier d'abord un objet de communication public (central event president) eventBus.js,
L'un des composants frères envoie des événements déclencheurs via $emit,
Un composant reçoit des événements d'écouteur via $on
Vue3 : Il n'y a pas de solution claire pour transmettre des valeurs aux composants frères, et la promotion d'état peut être utilisée
(Trouvez le composant parent commun de ces deux composants, puis implémentez-le en passant des valeurs entre le parent et l'enfant)
//utils文件夹下：eventBus.js
import {createApp} from 'vue'
// 实例化通信对象，导出
export default createApp()
Transmission de valeurs entre composants : Méthode 1 : Injection de dépendance : les composants externes transmettent des valeurs via l'option provide, et les composants internes reçoivent des valeurs via inject :
L'injection de dépendance n'est pas recommandée : le suivi des données étant difficile , on ne sait pas quel niveau le déclare ou quel niveau ou plusieurs niveaux sont utilisés. Si les données doivent être utilisées dans plusieurs composants, vous pouvez utiliser vueX pour la gestion de l'état. Si seul le composant enfant souhaite utiliser les données du composant parent, le composant parent peut transmettre des valeurs au composant enfant directement via des accessoires.
Transmission de valeurs entre composants : Méthode 2 : L'outil de gestion d'état vuex peut également être implémenté. flux de données à sens unique
Un fichier vue fourni ne peut en écrire qu'un (données au même niveau), et seul le dernier prendra effet lors de l'écriture multiple, donc d'autres méthodes,
Il en est de même pour les propriétés calculées, le code est exécuté de haut en bas, et seule la dernière prend effet
Attribut spécial ref $parent $root
-
refUne référence pour enregistrer un élément ou un sous-composant. Effectuer des opérations de base sur les pages dom1. Utilisez ref="au-dessus du dom de la balise"
2.this.$refs. Vous pouvez trouver l'élément spécifié avec votre nom
Mettez-le sur l'étiquette : le nœud dom de l'étiquette est obtenu.
<template>
<div>
<!-- 1.绑定 -->
<h1 ref="wangcai">找到我</h1>
<button @click="fun()">点我修改上面的内容</button>
</div>
</template>
<script>
export default {
methods:{
fun(){
// 2.找到他
this.$refs.wangcai.style.color="red";
}
}
}
</script>Mettez-le sur le composant et récupérez l'attribut method du sous-composant. Lorsque vous utilisez la méthode, rappelez-vous que la méthode doit être appelée avec (). ne pas répéter l'impression
<template>
<div>
<h1>我是home</h1>
<!-- 1.把ref绑定到组件身上 -->
<Rc ref="com"/>
<button @click="fun()">点我</button>
</div>
</template>
<script>
import Rc from "@/components/refcom.vue"
export default {
components:{
Rc
},
methods:{
fun(){
// 2.把ref绑定到组件身上父组件就可以得到子组件的所有属性和方法
console.log(this.$refs.com)
}
}
}
</script>
$parent : L'attribut method du composant parent peut être obtenu dans le sous-composant d'écriture, s'il y en a un, il sera obtenu, et s'il ne l'est pas, il sera nul
$set : This.$set("Qui voulez-vous ajouter", "clé ajoutée par x", "val que vous voulez ajouter")
Comment résoudre le problème d'essayer de garder les données inchangées dans Vue ?
<template>
<div>
<h2>数据变试图不会改变</h2>
<h3>{
{obj.age}}</h3>
<button @click="funb()">点我</button>
</div>
</template>
<script>
// 在vue2.0中 数据的双向绑定 是基于数据劫持与发布者订阅者模式的
// 其中数据劫持是通过Object.defineProperty()这个方法来拦截劫持data中的数据的 因为有了这个方法
// 所以数据改变试图也会更新
// 但是 Object.defineProperty()有个问题 他是会监听初始化的数据 如果中途给数组或者对象
// 添加新属性的时候 Object.defineProperty() 就不会监听到 不会监听到就没有数据劫持 没有
// 数据劫持就没有双向绑定 没有双向绑定就没有数据变试图变
export default {
methods:{
funb(){
// this.obj.age=18
// console.log(this.obj.age)
this.$set(this.obj,"age",18)
}
},
data(){
return {
obj:{
name:"xixi"
}
}
}
}
</script>
Transmission transparente (attribut) : Vue3 : attribut de transmission transparente. La transmission transparente est divisée en liaison de transmission transparente automatique et liaison manuelle.
Qu'est-ce que l'attribut transparent ? Les propriétés transparentes font référence aux propriétés qui agissent sur le composant lorsque le composant est utilisé, qui couleront et seront liées à l'étiquette dans le composant.
Transmission transparente : lorsque le composant parent transmet des données au composant enfant, le composant enfant reçoit l'attribut $attrs transmis par le composant parent
Fonction de transmission transparente :::
- héritage des attributs : l'enfant hérite du parent : par exemple : les en-têtes de classe, d'identifiant, de style, d'attribut, d'événement et autres peuvent être transmis de manière transparente aux balises du composant.
- Fusionner classe et style
v-on listener heritage
- s'il faut désactiver les attributs de transmission transparents : inheritAttrs : false
- héritage des nœuds multiracines : les composants enfants utilisent des props pour recevoir les attributs transmis par les composants parents
composants intégrés
Composant de cache <KeepAlive> : utilisé pour envelopper les composants de commutation dynamique
<KeepAlive> , lors de l'encapsulation d'un composant dynamique, met en cache les instances de composant inactives au lieu de les détruire. Éviter de restituer les composants (optimisation des performances)
keep-alive 和 inclure, exclure
activé désactivé
<component :is='coms[index]' /> Composant dynamique : détermine quel composant est rendu
is：特殊Attribute用于绑定[动态组件]
//动态组件：包裹挂载点即可
<keep-alive>
<component :is="Com"></component>
</keep-alive>
//路由：包裹路由出口即可
<keep-alive>
<router-view/>
</keep-alive>
//属性：如果 我把两个都写了 excloud的优先级大于incloude
include 你要缓存谁
exclude 你不想缓存谁
<keep-alive exclude="Db,xxxxx,cccc">
<!-- 设置动态组件的挂载点 -->
<component :is="com"></component>
</keep-alive>
#### 钩子函数
activated：在进入到被kepp-alive管理的组件时候触发
deactivated：在离开被kepp-alive管理的组件时候触发
替代 `mounted`挂载后 和 `unmounted`销毁后。
<template>
<div>
aaaaaaaa
<input type="text" />
</div>
</template>
<script>
export default {
activated() {
console.log("进入到了被keep-alive管理的组件中了");
},
deactivated() {
console.log("离开到了被keep-alive管理的组件中了");
},
};
</script>
Composant animé <Transiton /> : une seule étiquette ou un seul composant peut être placé à l'intérieur (utilisez le site officiel de vue pour visualiser)
name=" " Préfixe de nom de classe d'animation personnalisé, par défaut sinon
mode="out-in" définit l'ordre d'animation, in-out, out-in
Il y a un total de 6 classes CSS à appliquer pour entrer et sortir des effets de transition
<Transition>
<p v-if="show">hello</p>
</Transition>
/* 下面我们会解释这些 class 是做什么的 */
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}Composant socket <slot /> : personnalisez le contenu dans le composant (empruntez un lien pour expliquer en détail)
Si le contenu inséré dans la balise switch du composant n'est pas affiché par défaut ( le composant est un individu totalement indépendant, il n'y a aucun moyen d'insérer du contenu dans le composant sans paramètres particuliers ) Le slot sert à mixer le template du parent composant et le composant enfant
emplacement par défaut <emplacement />
Emplacement nommé <slot name="" />
Plugins de plug-in + directive d'instructions personnalisées
Définissez le plugin : export default { install(app){ } }
Plug-in d'application : la méthode d'utilisation app.use (plug-in) trouvera automatiquement la méthode d'installation du plug-in lors de son exécution et exécutera cette méthode pour terminer l'application du plug-in
Instructions locales : définies par les directives : { nom du plugin : { fonction de crochet } } option, qui ne peut être utilisée que dans le composant en cours
La fonction de la commande : dépend de la fonction de crochet de la commande crochet créé, monté, mis à jour...
eg: Lorsqu'un élément d'entrée est inséré dans le DOM par Vue, il sera automatiquement focalisé
Directive globale : le nom de la directive globale v- est utilisé, défini par la méthode app.directive('cals' { }), peut être utilisé dans n'importe quel composant, la fonction de la directive : dépend de la fonction de crochet du crochet de directive créé , monté, mis à jour.. ....
Utiliser v-automatiquement avec le nom de la directive
-
//a export default{ install(app){ app.directive('focus',{ // 绑定元素的父组件 // 及他自己的所有子节点都挂载完成后调用 mounted(el, binding, vnode, prevVnode) { el.focus(); //聚焦 }, }) } }// b export default{ install(app){ app.directive('cal',{ // 绑定元素的父组件 // 及他自己的所有子节点都挂载完成后调用 mounted(el, binding, vnode, prevVnode) { el.value = el.value * 10 + '没钱' // 加钱 }, }) } }<template> <div class="childa"> <!-- <h1 ref="title">{ { count }}</h1> --> childa组件 <input v-focus v-calc type="text" :value="4">哎哎哎啊 <input type="text" v-sss :value="6">哎哎哎啊 <h1 ref="title">{ { count }}</h1> <button @click="handleClick">传值</button> </div> </template> <script> export default { data() { return{ p:'123', count:3 } }, methods:{ handleClick(){ this.count++, // console.log(this.$refs.title.innerHTML); this.$nextTick(()=>{ console.log(this.$refs.title.innerHTML); }) } }, 局部自定义指令 directives: { //自定义局部指令，只能在当前组将中使用 // 在模板中启用 v-focus focus:{ // 在绑定元素的父组件 // 及他自己的所有子节点都挂载完成后调用 mounted(el, binding, vnode, prevVnode) { console.log(el); el.focus() } }, sss:{ // 在绑定元素的父组件 mounted(el, binding, vnode, prevVnode) { el.value = el.value * 7+'元' } } } } </script>
-
mixins : mix in
Rôle : Extraire le code commun (options) de plusieurs composants pour éviter la redondance de code
Utilisation : Le code public mixte apparaîtra dans la position d'option du composant
Le mélange global n'est pas recommandé, il causera une pollution globale, utilisez le mélange local suivant
import import mixins path, mix in : les données sont automatiquement mélangées au même niveau, vous pouvez directement utiliser les attributs de la méthode dans les mixins
export default{
// 能写在这里的都是组件已知选项 watch filter directives components data
methods:{
saveIndex(i){
this.index = i
}
},
computed:{
calc(){
return 2**10
}
}
} <footer>
<span @click="saveIndex(index)" v-for="item, index in btns" :key="index">{
{ item }}</span>
</footer>
// 导入mixins
import mixins from './mixins/index';
// 应用混入
mixins: [mixins],
methods: {
// 这个可以省略了。
// saveIndex(i) {
// this.index = i
// }
},Deux API principales : (peu utilisées)
$forceUpdate() : force le composant à être mis à jour (dans les cas extrêmes où il ne peut pas être mis à jour, je l'ai mal écrit)
$nextTick() : permet d'exécuter un code spécifique après le prochain cycle de mise à jour du composant
<button @click="handleClick">传值</button>
methods:{
handleClick(){
this.count++,
// console.log(this.$refs.title.innerHTML);
this.$nextTick(()=>{
console.log(this.$refs.title.innerHTML);
})
}
},