Cara menetapkan nilai yang diluluskan oleh komponen anak dalam Vue.js

Vue.js ialah rangka kerja JavaScript yang popular untuk membina aplikasi web berprestasi tinggi. Dalam rangka kerja Vue.js, komponen ialah unit asas untuk membina aplikasi dan interaksi antara komponen adalah sangat penting. Dalam kebanyakan kes, komponen anak perlu menghantar nilai kepada atau menerima nilai daripada komponen induk. Artikel ini akan memperkenalkan cara untuk menetapkan nilai yang diluluskan oleh komponen anak dalam Vue.js.

1. Komponen induk menghantar nilai kepada komponen anak

Dalam Vue.js, anda boleh menggunakan atribut untuk menghantar nilai kepada komponen anak. Apabila komponen induk mengisytiharkan komponen anak, ia menulis nilai yang akan dipindahkan pada teg komponen. Komponen kanak-kanak menerima nilai yang diluluskan melalui prop.

Kod contoh:

<!-- 父组件 -->
<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. Komponen anak menghantar nilai kepada komponen induk

Dalam Vue.js, anda boleh menggunakan acara untuk menghantar nilai ​kepada nilai Pas komponen induk. Anda boleh menggunakan kaedah $emit() dalam komponen anak untuk mencetuskan peristiwa dan lulus nilai yang perlu diluluskan. Komponen induk boleh menambah pendengar acara pada komponen anak dan mendapatkan nilai yang diluluskan apabila acara dicetuskan.

Kod sampel:

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

Melalui kod sampel di atas, anda boleh melihat kaedah komponen induk yang menghantar nilai kepada komponen anak dan nilai yang lulus komponen anak kepada komponen induk. Dalam Vue.js, anda boleh menghantar nilai antara komponen dan mencapai pelbagai interaksi menggunakan helah mudah ini.

Atas ialah kandungan terperinci Cara menetapkan nilai yang diluluskan oleh komponen anak dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!