Я изо всех сил пытаюсь понять, как передавать данные между компонентами в vue.js. Я прочитал документацию несколько раз и просмотрел множество вопросов и руководств по vue, но все еще не понимаю.

Чтобы понять это, я надеюсь на помощь в завершении довольно простого примера.

1. отобразить список пользователей в одном компоненте (готово)
2. отправлять пользовательские данные в новый компонент при нажатии ссылки (готово) - см. обновление внизу.
3. редактировать пользовательские данные и отправлять их обратно в исходный компонент (еще не дошли)

Вот скрипка, которая не работает на втором шаге: https://jsfiddle.net/retrogradeMT/d1a8hps0/

Я понимаю, что мне нужно использовать реквизиты для передачи данных новому компоненту, но я не уверен, как это сделать функционально. Как привязать данные к новому компоненту?

HTML:

    <div id="page-content">
       <router-view></router-view>
     </div>

 <template id="userBlock" >
   <ul>
     <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a>
     </li>
   </ul>
 </template>

  <template id="newtemp" :name ="{{user.name}}">
    <form>
      <label>Name: </label><input v-model="name">
      <input type="submit" value="Submit">
    </form>
  </template>

js для основного компонента:

Vue.component('app-page', {
  template: '#userBlock',

  data: function() {
    return{

        users: []
      }
    },

ready: function () {
    this.fetchUsers();
},

methods: {
    fetchUsers: function(){
        var users = [
          {
            id: 1,
            name: 'tom'
          },
          {
            id: 2,
            name: 'brian'
          },
          {
            id: 3,
            name: 'sam'
          },
        ];

        this.$set('users', users);
     }
    }
  })

JS для второго компонента:

Vue.component('newtemp', {
  template: '#newtemp',
  props: 'name',
  data: function() {
    return {
        name: name,
        }
   },
})

ОБНОВИТЬ

Хорошо, у меня есть второй шаг. Вот новая скрипка, показывающая прогресс: https://jsfiddle.net/retrogradeMT/9pffnmjp/

Поскольку я использую Vue-router, я не использую реквизиты для отправки данных в новый компонент. Вместо этого мне нужно установить параметры для v-ссылки, а затем использовать перехватчик перехода, чтобы принять его.

Изменения V-link см. Именованные маршруты в документации vue-router :

<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>

Затем на компоненте добавьте данные в параметры маршрута, см. Переходные крючки :

Vue.component('newtemp', {
  template: '#newtemp',
  route: {
   data: function(transition) {
        transition.next({
            // saving the id which is passed in url
            name: transition.to.params.name
        });
     }
  },
 data: function() {
    return {
        name:name,
        }
   },
})

------------- Следующее применимо только к Vue 1 --------------

Передавать данные можно несколькими способами. Метод зависит от типа использования.

Если вы хотите передавать данные из своего HTML при добавлении нового компонента. Это делается с помощью реквизита.

<my-component prop-name="value"></my-component>

Это значение свойства будет доступно вашему компоненту, только если вы добавите имя свойства prop-nameв свой propsатрибут.

Когда данные передаются от компонента к другому компоненту из-за некоторого динамического или статического события. Это делается с помощью диспетчеров событий и вещателей. Так, например, если у вас есть такая структура компонентов:

<my-parent>
    <my-child-A></my-child-A>
    <my-child-B></my-child-B>
</my-parent>

И вы хотите отправить данные из <my-child-A>в, <my-child-B>тогда <my-child-A>вам нужно будет отправить событие:

this.$dispatch('event_name', data);

Это событие будет проходить по всей родительской цепочке. И от того, какого родителя у вас есть ветка, <my-child-B>вы транслируете событие вместе с данными. Итак, в родительском:

events:{
    'event_name' : function(data){
        this.$broadcast('event_name', data);
    },

Теперь эта трансляция будет проходить по дочерней цепочке. И для какого бы потомка вы ни хотели захватить событие, в нашем случае <my-child-B>мы добавим еще одно событие:

events: {
    'event_name' : function(data){
        // Your code. 
    },
},

Третий способ передачи данных - это параметры в v-ссылках. Этот метод используется, когда цепочки компонентов полностью разрушены или в случаях, когда изменяется URI. И я вижу, вы их уже понимаете.

Решите, какой тип передачи данных вы хотите, и выберите соответствующий вариант.

Лучший способ отправить данные от родительского компонента к дочернему - использовать props .

Передача данных от родителя к потомку через props

• Объявить props(массив или объект ) в дочернем
• Передайте ребенку через <child :name="variableOnParent">

См. Демонстрацию ниже:

Vue.component('child-comp', {
  props: ['message'], // declare the props
  template: '<p>At child-comp, using props in the template: {{ message }}</p>',
  mounted: function () {
    console.log('The props are also available in JS:', this.message);
  }
})

new Vue({
  el: '#app',
  data: {
    variableAtParent: 'DATA FROM PARENT!'
  }
})

<script src="https://unpkg.com/vue@2.5.13/dist/vue.min.js"></script>

<div id="app">
  <p>At Parent: {{ variableAtParent }}<br>And is reactive (edit it) <input v-model="variableAtParent"></p>
  <child-comp :message="variableAtParent"></child-comp>
</div>

Я думаю, проблема здесь:

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

Когда вы добавляете в опору префикс, :вы указываете Vue, что это переменная, а не строка. Так что вам не нужно {{}}окружающее user.name. Пытаться:

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

РЕДАКТИРОВАТЬ-----

Сказанное выше верно, но большая проблема здесь в том, что при изменении URL-адреса и переходе на новый маршрут исходный компонент исчезает. Чтобы второй компонент редактировал родительские данные, второй компонент должен быть дочерним компонентом первого или просто частью того же компонента.

Я нашел способ передать родительские данные в область видимости компонента во Vue, я думаю, что это немного похоже на взлом, но, возможно, это поможет вам.

1) Справочные данные в экземпляре Vue как внешний объект (data : dataObj)

2) Затем в функции возврата данных в дочернем компоненте просто вернитесь parentScope = dataObjи вуаля. Теперь вы не можете делать такие вещи, {{ parentScope.prop }}и они будут работать как шарм.

Удачи!

Вышеупомянутые ответы работают хорошо, но если вы хотите передавать данные между двумя дочерними компонентами, то также можно использовать шину событий. Посетите этот блог, который поможет вам лучше понять.

Предположим для двух компонентов: 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);
    })
  }

Преимущества:

• Меньше и чистый код.
• Родитель не должен участвовать в передаче данных от одного дочернего компа другому (по мере роста числа детей его будет трудно поддерживать)
• Следует подходу pub-sub.

Я получаю доступ к основным свойствам, используя $root.

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

Глобальная переменная (объект) JS может использоваться для передачи данных между компонентами. Пример: передача данных из Ammlogin.vue в Options.vue. В Ammlogin.vue rspData настроен на ответ сервера. В Options.vue ответ сервера предоставляется через rspData.

index.html:

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

Ammlogin.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;
            });
    },
....

Options.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>