Comment définir la valeur transmise par le composant enfant dans Vue.js

Vue.js est un framework JavaScript populaire pour créer des applications Web hautes performances. Dans le framework Vue.js, les composants constituent l'unité de base pour créer des applications, et l'interaction entre les composants est très importante. Dans de nombreux cas, les composants enfants doivent transmettre des valeurs ou recevoir des valeurs du composant parent. Cet article explique comment définir la valeur transmise par un composant enfant dans Vue.js.

1. Le composant parent transmet la valeur au composant enfant

Dans Vue.js, vous pouvez utiliser des attributs pour transmettre la valeur au composant enfant. Lorsque le composant parent déclare le composant enfant, il écrit la valeur à transférer sur la balise du composant. Le composant enfant reçoit la valeur transmise via les accessoires.

Exemple de code :

<!-- 父组件 -->
<template>
    <div>
        <child-component :message="Hello"></child-component>
    </div>
</template>
<script>
    import ChildComponent from './ChildComponent.vue' //导入子组件
    export default {
        components: {
            'child-component': ChildComponent //注册子组件
        },
        data() {
            return {
                Hello: 'Hello, World!' //要传递的值
            }
        }
    }
</script>

<!-- 子组件 -->
<template>
    <div>
        <p>{{ message }}</p>
    </div>
</template>
<script>
    export default {
        props: ['message'] //接收父组件传递的值
    }
</script>

2. Le composant enfant transmet la valeur au composant parent

Dans Vue.js, vous pouvez utiliser des événements pour transmettre des valeurs au composant parent. Vous pouvez utiliser la méthode $emit() dans les composants enfants pour déclencher des événements et transmettre les valeurs qui doivent être transmises. Les composants parents peuvent ajouter des écouteurs d'événement sur les composants enfants et obtenir la valeur transmise lorsque l'événement est déclenché.

Exemple de code :

<!-- 父组件 -->
<template>
    <div>
        <child-component @child-message="handleChildMessage"></child-component>
        <p>接收到子组件传递的值：{{ messageFromChild }}</p>
    </div>
</template>
<script>
    import ChildComponent from './ChildComponent.vue' //导入子组件
    export default {
        components: {
            'child-component': ChildComponent //注册子组件
        },
        data() {
            return {
                messageFromChild: '' //接收传递的值
            }
        },
        methods: {
            handleChildMessage(message) { //事件监听器
                this.messageFromChild = message
            }
        }
    }
</script>

<!-- 子组件 -->
<template>
    <div>
        <button @click="sendMessage">向父组件传递信息</button>
    </div>
</template>
<script>
    export default {
        methods: {
            sendMessage() {
                this.$emit('child-message', '你好，父组件！') //触发事件
            }
        }
    }
</script>

Grâce à l'exemple de code ci-dessus, vous pouvez voir la méthode par laquelle le composant parent transmet la valeur au composant enfant et le composant enfant transmet la valeur au composant parent. Dans Vue.js, vous pouvez transmettre des valeurs entre les composants et réaliser diverses interactions à l'aide de ces astuces simples.

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!