滨州经济技术开发区慧泽电脑服务中心

在Vue.js中，你可以使用不同的方法来在页面级组件之间传递值。以下是一些常见的方法：

本文文章目录

• 3. Vuex
• 总结

   - 你可以在子组件中定义props，然后将数据从父组件传递给子组件。在子组件中，你可以像访问本地数据一样访问这些props。
   
   在父组件中：
   vue
   <template>
     <child-component :message="parentMessage"></child-component>
   </template>
   <script>
   export default {
     data() {
       return {
         parentMessage: 'Hello from parent!'
       }
     }
   }
   </script>
   
   
   在子组件中：
   vue
   <template>
     <div>{{ message }}</div>
   </template>
   <script>
   export default {
     props: ['message']
   }
   </script>
   

   - 你可以在子组件中触发自定义事件，并在父组件中监听这些事件。通过这种方式，子组件可以向父组件发送数据。
   
   在子组件中：
   vue
   <template>
     <button @click="sendMessage">Send Message</button>
   </template>
   <script>
   export default {
     methods: {
       sendMessage() {
         this.$emit('message-sent', 'Hello from child!');
       }
     }
   }
   </script>
   

   vue
   <template>
     <child-component @message-sent="handleMessage"></child-component>
   </template>
   <script>
   export default {
     methods: {
       handleMessage(message) {
         console.log(message); // 输出：Hello from child!
       }
     }
   }
   </script>
   

3. Vuex（适用于大型应用）： - Vuex 是 Vue.js 的状态管理库，允许你在不同组件之间共享状态。你可以在一个组件中修改状态，然后在另一个组件中访问该状态。

首先，安装并配置 Vuex。然后，你可以在任何组件中通过提交 mutations 来改变状态，并通过 getters 来访问状态。

总结：

这些方法可以根据你的具体需求选择使用。Props 适用于父子组件之间的通信，自定义事件适用于子组件向父组件发送信息，而 Vuex 更适用于大型应用中管理共享状态。