So legen Sie den von der untergeordneten Komponente übergebenen Wert in Vue.js fest

Vue.js ist ein beliebtes JavaScript-Framework zum Erstellen leistungsstarker Webanwendungen. Im Vue.js-Framework sind Komponenten die Grundeinheit zum Erstellen von Anwendungen, und die Interaktion zwischen Komponenten ist sehr wichtig. In vielen Fällen müssen untergeordnete Komponenten Werte an die übergeordnete Komponente übergeben oder von dieser empfangen. In diesem Artikel erfahren Sie, wie Sie den von einer untergeordneten Komponente in Vue.js übergebenen Wert festlegen.

1. Übergeordnete Komponente übergibt Werte an untergeordnete Komponenten

In Vue.js können Sie Attribute verwenden, um Werte an untergeordnete Komponenten zu übergeben . Wenn die übergeordnete Komponente die untergeordnete Komponente deklariert, schreibt sie den zu übertragenden Wert auf das Komponenten-Tag. Die untergeordnete Komponente erhält den übergebenen Wert über Requisiten.

Beispielcode:

<!-- 父组件 -->
<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. Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente

In Vue.js , können Sie Ereignisse verwenden, um Werte an übergeordnete Komponenten zu übergeben. Sie können die Methode $emit() in untergeordneten Komponenten verwenden, um Ereignisse auszulösen und die zu übergebenden Werte zu übergeben. Übergeordnete Komponenten können Ereignis-Listener für untergeordnete Komponenten hinzufügen und den übergebenen Wert abrufen, wenn das Ereignis ausgelöst wird.

Beispielcode:

<!-- 父组件 -->
<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>

Anhand des obigen Beispielcodes können Sie sehen, wie die übergeordnete Komponente einen Wert an die untergeordnete Komponente und die untergeordnete Komponente einen Wert an die übergeordnete Komponente übergibt. In Vue.js können Sie mit diesen einfachen Tricks Werte zwischen Komponenten übergeben und vielfältige Interaktionen erreichen.

Das obige ist der detaillierte Inhalt vonSo legen Sie den von der untergeordneten Komponente übergebenen Wert in Vue.js fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!