01.$racine；
Accéder à l'instance racine du composant ; pas beaucoup utilisé, effectuer essentiellement des opérations de données sur vuex ;
02.$parent/$enfants;
Vous pouvez obtenir les données sur le composant parent ou sur le composant enfant ; il n'est généralement pas recommandé d'utiliser $parent, car si vous obtenez cette valeur et la modifiez, les données sur le composant parent seront également modifiées ;
<template>
<div>
//相当于使用了爷组件上边title属性的值
{$parent.$parent.title}
<button @click="$parent.$parent.handle">
调用爷组件上边的方法
</button>
</div>
</template>03.$réfs；
Cela peut également obtenir les données sur le sous-composant ; dans le composant el, nous pouvons l'utiliser pour vérifier les données ;
this.$refs[formname].validate((valid)=>{
if(valid){
console.log('success');
}else{
console.log('fail')
return false;
}
})//这是子组件
<tempalte>
<div>
<input v-model="input" type="text" ref="txt">
</div>
</template>
export default{
data(){
return{
input：''
}
},
methods:{
fucus(){
this.$refs.txt.focus()
}
}
}<template>
<div>
<niu ref="hao"/>
<button @click="huo">获取焦点</button>
</div>
</template>
import niu from './niu.vue'
export default{
components:{
niu
},
methods:{
huo(){
this.$refs.hao.focus();
this.$refs.hap.value = '牛啊牛'
}
}
}04.provide、injecter
Dans le cas d'une imbrication plus importante, les sous-composants utilisent cette méthode pratique
//父组件
export default{
provide：{
return：{
title:this.title,
message:this.message
}
},
methods:{
message(){
return this.title
}
}
}//子组件 获得title变量以及message的方法
export default{
inject:['title','message']
}05.$attrs
Lier les propriétés non-props du composant parent aux composants internes (sans compter les propriétés de style et de classe)
//子组件
<template>
<div>
<input v-bind="$attrs">
</div>
</template>
export default{
inheritAttrs:false
}
06.$auditeurs
Lier l'événement natif de l'objet DOM du composant au composant interne