How to set value passed by child component in Vue.js

Vue.js is a popular JavaScript framework for building high-performance web applications. In the Vue.js framework, components are the basic unit for building applications, and the interaction between components is very important. In many cases, child components need to pass values ​​to or receive values ​​from the parent component. This article will introduce how to set the value passed by a child component in Vue.js.

1. Parent component passes value to child component

In Vue.js, you can use attributes to pass value to child component. When the parent component declares the child component, it writes the value to be transferred on the component tag. The child component receives the passed value through props.

Sample 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. Sub component passes value to parent component

In Vue.js, you can use events to pass values ​​to parent component . You can use the $emit() method in child components to trigger events and pass the values ​​that need to be passed. Parent components can add event listeners on child components and get the passed value when the event is fired.

Sample 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>

Through the above sample code, you can see the method of parent component passing value to child component and child component passing value to parent component. In Vue.js, you can pass values ​​between components and achieve a variety of interactions using these simple tricks.

The above is the detailed content of How to set value passed by child component in Vue.js. For more information, please follow other related articles on the PHP Chinese website!