Maison > Article > interface Web > Réponse détaillée : quel impact les modifications apportées à Vue ont-elles sur les composants ?
Cet article présente principalement l'impact des accessoires, des données et des modifications calculées de vue sur les mises à jour des composants. Maintenant, je le partage avec vous et lui donne une référence.
Cet article présente l'impact des modifications des accessoires, des données et des calculs sur les mises à jour des composants. Je voudrais le partager avec vous. Sans plus tarder, accédez simplement au code
/** this is Parent.vue */
<template>
<p>
<p>{{'parent data : ' + parentData}}</p>
<p>{{'parent to children1 props : ' + parentToChildren1Props}}</p>
<p>{{'parent to children2 props : ' + parentToChildren2Props}}</p>
<p>
<el-button @click="changeParentData">change parent data</el-button>
<el-button @click="changeParentToChildren1Props">change parent to children1 data</el-button>
<el-button @click="changeParentToChildren2Props">change parent to children2 data</el-button>
</p>
<my-children1 :children1Props="parentToChildren1Props" @changeParentToChildren1Props="changeParentToChildren1Props"></my-children1>
<my-children2 :children2Props="parentToChildren2Props" @changeParentToChildren2Props="changeParentToChildren2Props"></my-children2>
</p>
</template>
<script>
import Children1 from './Children1';
import Children2 from './Children2';
export default{
name: 'parent',
data() {
return {
parentData: 'ParentData',
parentToChildren1Props: 'ParentToChildren1Props',
parentToChildren2Props: 'ParentToChildren2Props'
}
},
beforeCreate: function() {
console.log('*******this is parent beforeCreate*********');
},
created: function() {
console.log('######this is parent created######');
},
beforeMount: function() {
console.log('------this is parent beforeMount------');
},
mounted: function() {
console.log('++++++this is parent mounted++++++++');
},
beforeUpdate: function() {
console.log('&&&&&&&&this is parent beforeUpdate&&&&&&&&');
},
updated: function() {
console.log('$$$$$$$this is parent updated$$$$$$$$');
},
methods: {
changeParentData: function() {
this.parentData = 'changeParentData'
},
changeParentToChildren1Props: function() {
this.parentToChildren1Props = 'changeParentToChildren1Props'
},
changeParentToChildren2Props: function() {
this.parentToChildren2Props = 'changeParentToChildren2Props'
}
},
components: {
'my-children1': Children1,
'my-children2': Children2
}
}
</script><.>/** this is Children1.vue */
<template>
<p>
<p>{{'children1 data : ' + children1Data}}</p>
<p>{{'parent to children1 props : ' + children1Props}}</p>
<p>{{'parent to children1 props to data : ' + children1PropsData}}</p>
<p>
<el-button @click.native="changeChildren1Data">change children1 data</el-button>
<el-button @click.native="emitParentToChangeChildren1Props">emit parent to change children1 props</el-button>
</p>
</p>
</template>
<script>
export default {
name: 'children1',
props: ['children1Props'],
data() {
return {
children1Data: 'Children1Data'
}
},
computed: {
children1PropsData: function() {
return this.children1Props
}
},
beforeCreate: function() {
console.log('*******this is children1 beforeCreate*********');
},
created: function() {
console.log('######this is children1 created######');
},
beforeMount: function() {
console.log('------this is children1 beforeMount------');
},
mounted: function() {
console.log('++++++this is children1 mounted++++++++');
},
beforeUpdate: function() {
console.log('&&&&&&&&this is children1 beforeUpdate&&&&&&&&');
},
updated: function() {
console.log('$$$$$$$this is children1 updated$$$$$$$$');
},
methods: {
changeChildren1Data: function() {
this.children1Data = 'changeChildren1Data'
},
emitParentToChangeChildren1Props: function() {
console.log('emitParentToChangeChildren1Props');
this.$emit('changeParentToChildren1Props');
}
}
}
</script>/** this is Children2.vue */
<template>
<p>
<p>{{'children2 data : ' + children2Data}}</p>
<p>{{'parent to children2 props : ' + children2Props}}</p>
<p>{{'parent to children2 props to data : ' + children2PropsData}}</p>
<p>
<el-button @click.native="changeChildren2Data">change children2 data</el-button>
<el-button @click.native="emitParentToChangeChildren2Props">emit parent to change children2 props</el-button>
</p>
</p>
</template>
<script>
export default {
name: 'children2',
props: ['children2Props'],
data() {
return {
children2Data: 'Children2Data',
children2PropsData: this.children2Props
}
},
beforeCreate: function() {
console.log('*******this is children2 beforeCreate*********');
},
created: function() {
console.log('######this is children2 created######');
},
beforeMount: function() {
console.log('------this is children2 beforeMount------');
},
mounted: function() {
console.log('++++++this is children2 mounted++++++++');
},
beforeUpdate: function() {
console.log('&&&&&&&&this is children2 beforeUpdate&&&&&&&&');
},
updated: function() {
console.log('$$$$$$$this is children2 updated$$$$$$$$');
},
methods: {
changeChildren2Data: function() {
this.children2Data = 'changeChildren2Data'
},
emitParentToChangeChildren2Props: function() {
this.$emit('changeParentToChildren2Props');
}
}
}
</script> Utiliser Cheerio pour créer un robot d'exploration Web simple dans Node.js (tutoriel détaillé)
Comment faire in vue Implémenter le composant parent pour transmettre plusieurs données aux composants enfants
Comment utiliser Native dans React pour implémenter une actualisation déroulante personnalisée pour extraire la liste chargée
Comment résoudre le problème de l'impossibilité de modifier dynamiquement l'adresse URL du composant jqgrid dans vue
Comment obtenir une note Taobao similaire dans vue
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!