Table des matières
Tout d'abord, le composant parent passe des paramètres au composant enfant
Le composant parent transmet le parentMessage du composant parent en tant que valeur de message au composant enfant en utilisant v-bind ou le raccourci : syntaxe sur l'étiquette du composant enfant. Les sous-composants reçoivent les paramètres passés en définissant des accessoires et restituent la valeur des paramètres dans le modèle.
<!-- 父组件 -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
parentMessage: 'Hello from parent component',
};
},
};
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<h3>子组件</h3>
<p>{
{
message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String,
},
};
</script>
Deux, le composant enfant vue appelle la méthode du composant parent
Le composant enfant appelle la méthode triggerEvent via l'événement click @click du bouton, dans lequel this.$emit est utilisé pour déclencher un événement personnalisé nommé child-event.
Dans le composant parent, utilisez @child-event pour lier la méthode parentMethod du composant parent afin d'écouter l'événement personnalisé déclenché par le composant enfant.
在子组件的emit事件中，可以传递额外的参数，供父组件的方法使用。例如：this.$emit('child-event', data)，其中data是传递的参数，父组件的方法可以通过监听事件时的回调函数接收这些参数。
<!-- 父组件 -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent @child-event="parentMethod" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
methods: {
parentMethod() {
console.log('Method called from child component');
},
},
};
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<h3>子组件</h3>
<button @click="triggerEvent">触发父组件方法</button>
</div>
</template>
<script>
export default {
methods: {
triggerEvent() {
// 不带参
this.$emit('child-event'); // 触发父组件的自定义事件
// 带参
this.$emit('child-event'， '222'); // 触发父组件的自定义事件
},
},
};
</script>
3. Le composant parent Vue appelle la méthode ou la propriété du composant enfant
Dans Vue, le composant parent peut faire référence au composant enfant via ref et appeler la méthode du composant enfant ou accéder aux propriétés du composant enfant via cette référence.
<!-- 父组件 -->
<template>
<div>
<h2>父组件</h2>
<ChildComponent ref="childComponentRef" />
<button @click="callChildMethod">调用子组件方法</button>
<p>{
{
childComponentMessage }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent,
},
data() {
return {
childComponentMessage: '',
};
},
methods: {
callChildMethod() {
this.$refs.childComponentRef.childMethod(); // 调用子组件的方法
this.childComponentMessage = this.$refs.childComponentRef.childProperty; // 访问子组件的属性
},
},
};
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
<div>
<h3>子组件</h3>
</div>
</template>
<script>
export default {
data() {
return {
childProperty: 'Message from child component',
};
},
methods: {
childMethod() {
console.log('Method called from parent component');
},
},
};
</script>
4. Le sous-composant Vue modifie la valeur prop
1. Passez le parent à l'enfant, et l'enfant appelle la méthode parent pour passer les paramètres
<!-- 父组件 -->
<template>
<child-view :num="num" @updateNum="updateNum"></child-view>
</template>
<script>
import childView from './assembly/child'
export default {
components: {
childView},
data() {
return {
num: 2
}
},
methods: {
updateNum(num){
this.num = num
}
}
</script>
<!-- 子组件 -->
<<template>
<div>
<p>父传过来的值：{
{
num}}</p>
<button @click="changeNum">加一</button>
</div>
</template>
<script>
export default {
name: 'child',
props:{
num: {
type:Number,
default: 0
}
},
methods:{
changeNum(){
this.$emit("updateNum",this.num + 1)
}
}
}
2. Via le modificateur .sync et $emit with update:, cette méthode ne peut être utilisée que par vue2
<!-- 父组件 -->
<template>
<child-view :num.sync="num"></child-view>
</template>
<script>
import childView from './assembly/child'
export default {
components: {
childView},
data() {
return {
num: 2
}
}
}
</script>
<template>
<div>
<p>父传过来的值：{
{
num}}</p>
<button @click="changeNum">加一</button>
</div>
</template>
<script>
export default {
name: 'child',
props:{
num: {
type:Number,
default: 0
}
},
methods:{
changeNum(){
this.$emit("update:num",this.num + 1)
}
}
}
</script>
3. Utiliser v-modal pour lier une source de données
<!-- 父组件 -->
<template>
<child-view v-modal="num"></child-view>
</template>
<script>
import childView from './assembly/child'
export default {
components: {
childView},
data() {
return {
num: 2
}
}
}
</script>
<template>
<div>
<p>父传过来的值：{
{
num}}</p>
<input type="text" :value="value" @input="$emit('input',$event.target.value)">
</div>
</template>
<script>
export default {
name: 'child',
props:["value"]
}
</script>