如何在不使用 vuex 的情况下将对象从 A 组件传递到 Vue.js 中的 B 组件？

Question

两个组件在app.vue中使用vue-router定义如下：

<div class='app'>
    <div class='nav'>
        <router-link to='/a'>to A component</router-link>
        <router-link to='/b'>to B component</router-link>
    </div>
    <div class='content'>
        <router-view></router-view>
    </div>    
</div>  

---

我试图接收一个事件，其中包含 app.vue 中的一个对象，该对象是从 A 组件 发出的 $emit 和然后我可以将对象从 app.vue 发送到 B 组件

代码如下：

    //script in A component
    data () {
       toModify (good) {
         console.log(good)  // {'name': 'mike'}
         this.$emit('tomodify', [good])
       }
    }

    <!-- A component -->
    <button class="modifyBtn" @click="toModify(good)">Modify</button>

      //script in app.vue
        methods: {
          sendData (good) {
            this.agood = good
            console.log(this.agood)  // undefined
          }
        }

      <!--app.vue-->
      <div class="view-wrapper">
        <router-view @tomodify="sendData(good)"></router-view>
      </div>

而且我不知道为什么在 app.vue 中我可以获取事件但没有来自 A 组件的对象 .

Answer 1

父组件向子组件传递数据的官方方法是props. The official method of passing data from a child component to its parent component is by using emit.

事件在子组件中使用 this.$emit('event_name', some_data) 发出，并在父组件的模板中捕获，例如 <child-component v-on:event_name="methodName">。