Vue.js의 하위 구성 요소가 전달한 값을 설정하는 방법

Vue.js는 고성능 웹 애플리케이션을 구축하는 데 널리 사용되는 JavaScript 프레임워크입니다. Vue.js 프레임워크에서 컴포넌트는 애플리케이션을 구축하기 위한 기본 단위이며, 컴포넌트 간의 상호작용은 매우 중요합니다. 많은 경우 하위 구성요소는 상위 구성요소에 값을 전달하거나 상위 구성요소로부터 값을 받아야 합니다. 이 글에서는 Vue.js의 하위 컴포넌트가 전달하는 값을 설정하는 방법을 소개합니다.

1. 상위 구성 요소는 하위 구성 요소에 값을 전달합니다.

Vue.js에서는 속성을 사용하여 하위 구성 요소에 값을 전달할 수 있습니다. 상위 구성 요소가 하위 구성 요소를 선언하면 전송할 값을 구성 요소 태그에 씁니다. 하위 구성 요소는 props를 통해 전달된 값을 받습니다.

샘플 코드:

<!-- 父组件 -->
<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. 하위 구성 요소가 상위 구성 요소에 값을 전달합니다.

Vue.js에서는 이벤트를 사용하여 상위 구성 요소에 값을 전달할 수 있습니다. 하위 구성 요소의 $emit() 메서드를 사용하여 이벤트를 트리거하고 전달해야 하는 값을 전달할 수 있습니다. 상위 구성 요소는 하위 구성 요소에 이벤트 리스너를 추가하고 이벤트가 실행될 때 전달된 값을 가져올 수 있습니다.

샘플 코드:

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

위의 샘플 코드를 통해 상위 컴포넌트가 하위 컴포넌트에 값을 전달하는 방식과 하위 컴포넌트가 상위 컴포넌트에 값을 전달하는 방식을 볼 수 있습니다. Vue.js에서는 이러한 간단한 트릭을 사용하여 구성 요소 간에 값을 전달하고 다양한 상호 작용을 구현할 수 있습니다.

위 내용은 Vue.js의 하위 구성 요소가 전달한 값을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!