0

Использую Vue.js в шаблоне вызываю компонент

<message :messages="messages" :messages_id="{{ $messages_id }}"></message>

компонент принимает параметр

export default {
    props: ['messages', 'messages_id'],
}

как передать messages_id из компонента в само приложение в data?

app.js

Vue.component('message', require('./components/Message.vue'));

const app = new Vue({
el: '#app',
data:  {
    messages: [],
    messages_id: 0,
},
mounted(){
    this.fetchMessages(this.messages_id);
},
methods: {
    fetchMessages(messages_id) {
        axios.get('/message/'+messages_id).then(response => {
            this.messages = response.data;
        })
    },
}  
0

1 ответ 1

1

Во Vue вы не можете менять props. Вы можете создать новую переменную в data, передать ей значение из props. Тогда её можно менять. Чтобы передать это значение родительскому компоненту, необходимо использовать this.$emit('event'[, value]), а на родительском компоненте отлавливать событие event, перезаписывать значение переменной data. Таким образом передача данных из родительского компонента в дочерний не двучсторонняя, а строго односторонняя, а передавать значения из ребенка родителю можно только событиями. Документация: https://ru.vuejs.org/v2/guide/components.html#Пользовательские события

Vue.component('my-message', {
  template: '<div v-on:click="idChange">Message id is: {{child_messages_id}}<div>',
  props: ['messages', 'messages_id'],
  data: function () {
    return {child_messages_id: this.messages_id}
    },
  methods: {
    idChange() {
      this.child_messages_id++;
      this.$emit('id-change', this.child_messages_id)
    }
  }
})

const app = new Vue({
  el: '#app',
  data: {
    messages: [],
    messages_id: 0,
  },
  methods: {
    onIdChange(val) {
      this.messages_id = val
    }
  }
  //... fetch data
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <h1>{{messages_id}}</h1>
  <my-message v-on:id-change="onIdChange" :messages="messages" :messages_id="messages_id"></my-message>
</div>

1
  • спасибо за ответ я не хотел изменять props, я хочу передать начальную переменную, чтоб загружать комментарии после загрузки страницы (при инициализации скрипта), но и Ваш ответ выше тоже очень полезен @larrymacbarry 24 фев 2018 в 13:55

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.