Question

我在同一视图中放置了两个组件。

@extends('layouts.app') 
@section('content')
<bus></bus>
<bus2></bus2>
@endsection

我想在单击按钮后将数据（名称）从一个组件传递到另一组件。为此，我使用$ emit函数。

/// bus component
<template>
    <div>
        <p> Name Bus 1{{name}}</p>
        <input type="button" @click="setName()"  value="s"/>
    </div>
</template>

<script>
export default {
  created() {},
  data: function() {
    return {
      name: "Volvo"
    };
  },
  methods: {
    setName: function(id) {
      this.$root.$emit("sname", this.name);
    }
  },
  props: []
};
</script>



///bus 2 component

<template>
    <div>
        <p> Name bus 2{{name}}</p>

    </div>
</template>

<script>
export default {
  created() {
    this.$root.$on("sname", data => {
      this.name = data;
    });
  },

  data: function() {
    return {
      count: 0,
      name: ""
    };
  },

  methods: {}
};
</script>

一切正常。名称从bus转移到bus2。当我将bus2放在不同的视图中时，存在问题-不会传输数据，但代码是相同的。如何在放置在不同视图中的组件之间传输数据

Answer 1

尝试使用Vuex来指定您的应用状态，并在必要时进行更改。

可以使用this.$store或$store从每个组件访问Vuex状态。

如何在放置在不同视图中的组件之间传输数据

1 个答案: