Vue-Router 将数据传递给另一个组件

Posted 2023-02-23

【中文标题】Vue-Router 将数据传递给另一个组件

【英文标题】：Vue-Router passing data to another component

【发布时间】：2018-10-21 14:32:00

【问题描述】：

我在使用 Vue-Router 将数据从一个组件传递到另一个组件时遇到问题。

我在主组件中有这个模板：

<li><router-link to="/">Daily</router-link></li>
<li><router-link to="/weekly/">Weekly</router-link></li>
<router-view></router-view>

在我的DailyComponent 组件中，我有这个数据函数：

data() 
  return 
    userCount: 0,
  

第二个链接发送到名为WeeklyComponent的组件。

如何将userCount: 0 数据从DailyComponent 传递到WeeklyComponent，然后在那里显示？

谢谢！

【问题讨论】：

您可以在router.vuejs.org/en/essentials/passing-props.html 找到信息。或者您可以使用vuejs.org/v2/guide/state-management.html 管理状态传递。

感谢您的快速回复，我会检查您提供的链接

【参考方案1】：

这个问题更多地是关于如何以这样一种方式来构建组件以在它们之间共享数据。有很多方法可以做到这一点，每种方法都有自己的优点和缺点，具体取决于具体情况。我建议您搜索 ***/google 以了解如何执行此操作，因为已经深入讨论过。

将userCount数据的所有者提升到父级

使父组件成为userCount 数据的所有者，并通过props 将其传递给子组件。如果子组件想要修改该数据，它们必须$emit 一个带有父响应的新值的事件，以便它可以更新该值。

const Daily = 
  props: ['userCount'],
  template: '<p>Daily:  userCount  <button @click="increment">+ 1</button></p>',
  methods: 
    increment() 
      this.$emit('user-count', this.userCount + 1);
    
  
;

const Weekly = 
  props: ['userCount'],
  template: '<p>Weekly:  userCount  <button @click="increment">+ 5</button></p>',
  methods: 
    increment() 
      this.$emit('user-count', this.userCount + 5);
    
  
;

new Vue(
  el: '#app',
  router: new VueRouter(
    routes: [
       path: '/daily', component: Daily ,
       path: '/weekly', component: Weekly 
    ]
  ),
  data: 
    userCount: 0,
  ,
)

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/daily">Daily</router-link>
  <router-link to="/weekly">Weekly</router-link>
  
  <router-view :user-count="userCount" @user-count="userCount = $event"></router-view>
</div>

Vuex 或其他一些外部状态管理

已经有很多 Vuex 示例，所以我不会在这里复制，但你可以想出任何你想要的状态管理系统。

对于您的示例，Vuex 可能有点矫枉过正。你可以只传递一个共享的响应式对象。

const Daily = 
  props: ['shared'],
  template: '<p>Daily:  shared.userCount  <button @click="increment">+ 1</button></p>',
  methods: 
    increment() 
      this.shared.userCount += 1;
    
  
;

const Weekly = 
  props: ['shared'],
  template: '<p>Weekly:  shared.userCount  <button @click="increment">+ 5</button></p>',
  methods: 
    increment() 
      this.shared.userCount += 5;
    
  
;

new Vue(
  el: '#app',
  router: new VueRouter(
    routes: [
       path: '/daily', component: Daily ,
       path: '/weekly', component: Weekly 
    ]
  ),
  data: 
    shared: 
      userCount: 0,
    
  ,
)

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script>

<div id="app">
  <router-link to="/daily">Daily</router-link>
  <router-link to="/weekly">Weekly</router-link>
  
  <router-view :shared="shared"></router-view>
</div>

【讨论】：

你在@Decade Moon那里得到了一个非常有用的答案！非常感谢您给我时间来回答我的问题！

@Decade Moon 对于道具的做法：为什么在this.$emit 函数中使用'user-count' 而不是userCount？ 'user-count' 指的是什么？

@BennettDams userCount 将是首选的事件名称，但 HTML 中的属性不区分大小写，因此 Vue 会将 @userCount 读取为 @usercount 并且它不起作用。我使用user-count（烤肉串大小写）作为小写折衷（你也可以使用usercount，但这不会分开单词）。如果您在 webpack 构建中使用单文件组件，那么这不适用，您可以改用 $emit('userCount', ...) 和 @userCount。

那么您在路由器视图中使用user-count 来“绑定”该值？你能解释一下路由器视图中的@user-count="userCount = $event" 是干什么用的吗？我知道@clicketc.，但是@user-count 是干什么用的？

@user-count 是user-count 事件的事件监听器，当组件想要更改父级中userCount 的值时，会发出user-count 事件。 userCount = $event是监听函数，将this.userCount设置为事件参数（$emit('user-count', x)中的参数为x）。

【参考方案2】：

您可以使用Vuex 或global event bus 之类的名称。您还可以拥有两个组件的共同父组件。

如果您使用事件总线，您可以发出带有值的事件并在应用程序的任何位置监听它们。如果您有一个共同的父组件，您可以将userCount 作为道具传递给两个子组件，然后从子组件向父组件发出事件。每次孩子想要更改值时，它都会发出事件，然后父级代表它更改值。