Vue.jsで子コンポーネントによって渡される値を設定する方法

Vue.js は、高パフォーマンスの Web アプリケーションを構築するための人気のある 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 中国語 Web サイトの他の関連記事を参照してください。