将数据传递给 vue.js 中的组件

我认为问题在这里：

<template id="newtemp" :name ="{{user.name}}">

当你为 prop 加上 : 前缀时，你是在向 Vue 表明它是一个变量，而不是一个字符串。因此，您不需要 user.name 周围的 {{}}。尝试：

<template id="newtemp" :name ="user.name">

编辑 - - -

以上是真的，但这里更大的问题是，当你更改 URL 并转到新路由时，原来的组件会消失。为了让第二个组件编辑父数据，第二个组件需要是第一个组件的子组件，或者只是同一组件的一部分。

我找到了一种在 Vue 中将父数据传递给组件范围的方法，我认为这有点像 hack，但也许这会对你有所帮助。

1) 将 Vue Instance 中的数据作为外部对象引用 (data : dataObj)

2）然后在子组件的数据返回函数中只返回parentScope = dataObj，瞧。现在您可以执行 {{ parentScope.prop }} 之类的操作，并且会像魅力一样工作。

祝你好运！

上述响应效果很好，但如果你想在 2 个兄弟组件之间传递数据，那么也可以使用事件总线。看看这个博客，它会帮助你更好地理解。

假设有 2 个组件：CompA 和 CompB 具有相同的父级和 main.js，用于设置主 vue 应用程序。要在不涉及父组件的情况下将数据从 CompA 传递到 CompB，您可以执行以下操作。

在 main.js 文件中，声明一个单独的全局 Vue 实例，这将是事件总线。

export const bus = new Vue();

在生成事件的 CompA 中：您必须将事件发送到总线。

methods: {
      somethingHappened (){
          bus.$emit('changedSomething', 'new data');
      }
  }

现在的任务是监听发出的事件，所以，在 CompB 中，你可以像监听一样。

created (){
    bus.$on('changedSomething', (newData) => {
      console.log(newData);
    })
  }

优点：

更少和清洁代码。

父母不应参与将数据从 1 个子组件传递给另一个（随着子组件数量的增加，将变得难以维护）

遵循发布-订阅方法。

我使用 $root 访问主要属性。

Vue.component("example", { 
    template: `<div>$root.message</div>`
});
...
<example></example>

全局 JS 变量（对象）可用于在组件之间传递数据。示例：将数据从 Amlogin.vue 传递到 Options.vue。在 Ammlogin.vue 中，rspData 被设置为来自服务器的响应。在 Options.vue 中，来自服务器的响应通过 rspData 提供。

索引.html：

<script>
    var rspData; // global - transfer data between components
</script>

登录.vue：

....    
export default {
data: function() {return vueData}, 
methods: {
    login: function(event){
        event.preventDefault(); // otherwise the page is submitted...
        vueData.errortxt = "";
        axios.post('http://vueamm...../actions.php', { action: this.$data.action, user: this.$data.user, password: this.$data.password})
            .then(function (response) {
                vueData.user = '';
                vueData.password = '';
                // activate v-link via JS click...
                // JSON.parse is not needed because it is already an object
                if (response.data.result === "ok") {
                    rspData = response.data; // set global rspData
                    document.getElementById("loginid").click();
                } else {
                    vueData.errortxt = "Felaktig avändare eller lösenord!"
                }
            })
            .catch(function (error) {
                // Wu oh! Something went wrong
                vueData.errortxt = error.message;
            });
    },
....

选项.vue：

<template>
<main-layout>
  <p>Alternativ</p>
  <p>Resultat: {{rspData.result}}</p>
  <p>Meddelande: {{rspData.data}}</p>
  <v-link href='/'>Logga ut</v-link>
</main-layout>
</template>
<script>
 import MainLayout from '../layouts/Main.vue'
 import VLink from '../components/VLink.vue'
 var optData = { rspData: rspData}; // rspData is global
 export default {
   data: function() {return optData},
   components: {
     MainLayout,
     VLink
   }
 }
</script>