Table des matières
1. Présentation des composants
2. Méthode de communication des composants
1. Le composant parent transmet la valeur au composant enfant
2. Le composant enfant transmet la valeur au composant parent
3. Transfert de valeur entre composants frères
4. Passage de valeurs entre composants ancêtres et composants descendants
5. À propos du flux de données à sens unique
1. Présentation des composants
Les composants sont l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre les éléments HTML, encapsulant du code réutilisable. À un niveau élevé, les composants sont des éléments personnalisés auxquels le compilateur de Vue ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également apparaître comme des éléments HTML natifs étendus avec l'attribut is. Lorsqu'un composant est enregistré, divers paramètres doivent être spécifiés pour le composant.
Étant donné que les composants sont des instances Vue réutilisables, ils reçoivent les mêmes options que le nouveau Vue, telles que les crochets de données, calculés, de surveillance, de méthodes et de cycle de vie. Les seules exceptions sont les options spécifiques à l'instance racine comme el.
Caractéristiques des composants :
- Les composants peuvent être réutilisés un nombre illimité de fois
- Les données du composant doivent être une fonction pour garantir que chaque instance peut conserver une copie indépendante de l'objet renvoyé, c'est-à-dire que toute modification d'un composant n'affectera pas les autres composants
1. Définir les composants
Les composants ont les mêmes options que le nouveau Vue, telles que les données, le calcul, la surveillance, les méthodes et les crochets de cycle de vie, etc., mais les composants n'ont pas d'options el, mais utilisent le modèle
let myA={
template:`
<div>
{
{msgA}}
</div>
`,
data(){
return {
msgA:'我是子组件'
}
}
};2. Enregistrer les composants
Avant d'utiliser le composant, vous devez d'abord enregistrer le composant. Les manières d'enregistrer le composant sont : l'enregistrement global et l'enregistrement local
2.1 Enregistrement global
Utilisez Vue.component('nom du composant', composant); pour l'enregistrement global, les composants après l'enregistrement global peuvent être utilisés dans n'importe quel composant.
Vue.component('my-a',myA);2.2 Enregistrement partiel
Les composants partiellement enregistrés ne peuvent être utilisés que dans le composant actuel, nous voulons donc utiliser le composant dans quel composant et enregistrer localement le composant dans ce composant. Nous utilisons l'élément de configuration des composants pour l'enregistrement local.
Par exemple, si nous voulons utiliser le composant myA dans le composant myB, nous devons enregistrer partiellement le composant myA dans le composant myB :
let myA={
template:`
<div>
{
{msgA}}
</div>
`,
data(){
return {
msgA:'我是子组件'
}
}
};
let myB={
// 局部注册
components:{
//组件名: 组件
'my-a':myA
},
template:`
<div>B组件
<my-a></my-a>
</div>
`
}3. Utiliser des composants
Pour utiliser des composants, il vous suffit d'utiliser des balises html dans le modèle, et le nom de la balise est le nom du composant :
<div id="app">
<my-a></my-a>
<my-b></my-b>
</div>2. Méthode de communication des composants
Le composant A utilise le composant B dans son modèle. Ils doivent communiquer entre eux : le composant parent peut envoyer des données au composant enfant, et le composant enfant peut informer le composant parent de ce qui s'est passé à l'intérieur. Dans Vue, la relation entre les composants parent et enfant peut être résumée lorsque les accessoires sont transmis et que les événements sont transmis. Le composant parent envoie des données au composant enfant via des props, et le composant enfant envoie des messages au composant parent via des événements.
1. Le composant parent transmet la valeur au composant enfant
La manière dont le composant parent transmet la valeur au composant enfant :
Étape 1 : Écrivez la valeur à transmettre dans l'étiquette du composant enfant
Étape 2 : Utilisez l'élément de configuration des accessoires dans le composant enfant pour recevoir la valeur transmise par le composant parent
<body>
<div id="app">
<!-- 父组件传值给子组件 -->
<!-- 1.在子组件标签上 写入传入的值 -->
<!-- 静态传参 不使用v-bind进行数据绑定，那么传递的就是'msg'字符串本身-->
<!-- <my-a msg1="msg"></my-a> -->
<!-- 动态传参 使用v-bind进行数据绑定，就可以传递任意类型的值-->
<my-a :msg2="msg" :age="18" :obj="{name:'zhangsan'}" :stu='[1,2,3]'></my-a>
</div>
<script>
let myA={
// 子组件内使用props接收父组件传递的值
props:['msg2','stu','age','obj'],
template:`
<div>
我是子组件<br>
{
{msg2}}---{
{typeof msg2}}<br>
{
{stu}}---{
{typeof stu}}<br>
{
{age}}---{
{typeof age}}<br>
{
{obj}}---{
{typeof obj}}
</div>
`
};
new Vue({
// 局部注册组件
components:{
'my-a':myA
},
el:"#app",
data:{
msg:'我是父组件'
}
})
</script>
</body>Dans les accessoires, le composant enfant peut effectuer une vérification de type sur la valeur transmise du composant parent. Lorsque la valeur transmise n'est pas du type souhaité, une erreur est signalée. À ce stade, les accessoires doivent être écrits sous la forme de un objet:
Remarque : null et undefined peuvent passer n'importe quel type de validation
<body>
<div id="app">
<!-- 父组件传值给子组件 -->
<!-- 1.在子组件标签上 写入传入的值 -->
<!-- 静态传参 不使用v-bind进行数据绑定，那么传递的就是'msg'字符串本身-->
<!-- <my-a msg1="msg"></my-a> -->
<!-- 动态传参 使用v-bind进行数据绑定，就可以传递任意类型的值-->
<my-a :msg2="msg" :age="18" :obj="{name:'zhangsan'}" :stu='[1,2,3]' :stu2="19"></my-a>
</div>
<script>
let myA = {
// 子组件内使用props接收父组件传递的值
props: {
age: {
// 可以进行多个类型值的校验
// 可以是Number,String,Boolean类型中的任意一个
type: [Number, String, Boolean],
// 自定义校验器规则 参数val表示传过来的值
validator(val) {
return val > 50
}
},
msg2: String,
obj: Object,
stu2: String,
stu: {
type: Array,
// 可以设置默认值，注意：需要写成函数的形式
default () {
return [4, 5, 6]
},
//要求必须传递
required: true
}
},
template: `
<div>
我是子组件<br>
{
{msg2}}---{
{typeof msg2}}<br>
{
{stu}}---{
{typeof stu}}<br>
{
{stu2}}---{
{typeof stu2}}<br>
{
{age}}---{
{typeof age}}<br>
{
{obj}}---{
{typeof obj}}
</div>
`
};
new Vue({
// 局部注册组件
components: {
'my-a': myA
},
el: "#app",
data: {
msg: '我是父组件'
}
})
</script>
</body>
2. Le composant enfant transmet la valeur au composant parent
La façon dont le composant enfant transmet les valeurs au composant parent :
Étape 1 : Utilisez $emit('emit event name', paramètres passés) dans le composant enfant pour émettre des événements personnalisés et transmettre des valeurs au composant parent
Étape 2 : Déclarez un événement personnalisé dans le composant parent pour recevoir des paramètres
<body>
<div id="app">
<!-- 自定义事件 -->
<my-a @my-event="handler"></my-a>
</div>
<script>
let myA = {
template: `
<div>我是子组件
<button @click='toSend'>子传值给父</button>
</div>
`,
data() {
return {
subMsg: "我是子组件A,我要给父组件传值"
}
},
methods: {
toSend() {
// 发射事件 $emit('发射事件的名称'，传递的参数)
this.$emit('my-event', this.subMsg)
}
}
}
new Vue({
components: {
'my-a': myA
},
el: '#app',
data: {
msg: "我是父组件",
},
methods: {
handler(a) {
console.log(a, '这是子组件的值');
}
}
})
</script>
</body>
3. Transfert de valeur entre composants frères
La façon de passer des valeurs entre composants frères :
Utilisation du bus d'événement :
Étape 1 : Déclarez un bus d'événement xxx.js, c'est-à-dire créez un nouveau fichier js et exportez une instance de Vue dans le fichier js
Étape 2 : introduisez le bus d'événements xxx.js, c'est-à-dire importez le fichier xxx.js dans l'un des composants frères et utilisez $emit() pour émettre des données
Étape 3 : importez le fichier xxx.js dans un autre composant frère et utilisez $on() pour recevoir les données transmises par le composant frère
Nous démontrons en vue des échafaudages :
Après avoir créé l'échafaudage, nous créons deux fichiers .vue sous le dossier des composants sous src, à savoir Header.vue et Footer.vue, puis introduisons et utilisons ces deux composants dans App.vue.À ce stade, Header.vue et Footer. vue sont des composants frères, puis créez un nouveau fichier eventBus.js sous src, qui est le bus d'événements.
app.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Header/>
<hr>
<Footer/>
</div>
</template>
<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header,
Footer,
},
data() {
return {
msg:'我是祖先组件'
}
},
provide(){
return {'msg':this.msg}
}
}
</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>eventBus.js
import Vue from 'vue';
export default new Vue();En-tête.vue
<template>
<div>
{
{msgH}}
<button @click="handler">点击我传值给Footer</button>
</div>
</template>
<script>
// 引入事件总线
import Bus from '../eventBus.js'
export default {
data(){
return {
msgH:"头部组件",
Footer:"这是兄弟组件Footer"
}
},
methods:{
handler(){
// 兄弟组件传值
// 1.兄弟组件使用$emit('发射事件',携带参数)
Bus.$emit('toFoot',this.Footer)
}
}
}
</script>Footer.vue
<template>
<div>
{
{msgF}}
</div>
</template>
<script>
// 引入事件总线
import Bus from '../eventBus.js'
export default {
data(){
return {
msgF:"底部组件",
}
},
// 另一个兄弟组件使用 $on(自定义事件名称,(形参 用于接收兄弟组件传递过来的值)=>{}) 接收参数
created(){
Bus.$on('toFoot',(a)=>{
console.log(a,"这是Footer传给我的值");
})
}
}
</script>
4. Passage de valeurs entre composants ancêtres et composants descendants
La méthode de passage des valeurs entre les composants ancêtres et les composants descendants :
la première étape : les composants ancêtres utilisent la méthode provide pour passer des données
Étape 2 : Les descendants utilisent inject pour injecter des données
Nous démontrons également dans l'échafaudage vue :
créez un nouveau fichier FooterChild.vue sous le dossier des composants, puis utilisez le composant FooterChild.vue dans le composant Footer.vue, et utilisez le composant Footer.vue dans App.vue, puis App.vue. sera utilisé comme composant ancêtre, FooterChild.vue est utilisé comme composant descendant.
app.vue
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<Header/>
<hr>
<Footer/>
</div>
</template>
<script>
import Header from './components/Header.vue'
import Footer from './components/Footer.vue'
export default {
name: 'App',
components: {
Header,
Footer,
},
data(){
return {
msg: '我是祖先组件',
a: 18
}
},
// 祖先组件使用provide方法提供传递的数据
provide(){
return {
"msg":this.msg,
"a":this.a
}
}
}
</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>Footer.vue
<template>
<div>
{
{msgF}}
<FooterChild/>
</div>
</template>
<script>
import FooterChild from './FooterChild.vue'
export default {
components:{
FooterChild
},
data(){
return {
msgF:"底部组件",
}
}
}
</script>FooterChild.vue
<template>
<div>
{
{msgC}}--{
{msg}}--{
{a}}
</div>
</template>
<script>
export default {
data(){
return {
msgC:"底部组件的子组件"
}
},
// 注入数据
inject:['msg','a']
}
</script>
5. À propos du flux de données à sens unique
Un flux de données unidirectionnel signifie que les données circulent de la couche supérieure vers la couche inférieure, c'est-à-dire que lorsque les données du composant parent changent, les données du composant enfant changent également ; tandis que les données du composant enfant changent , les données du composant parent ne seront pas affectées Influence.