Vuejs Dynami c Div текст - PullRequest
Новая
       22

Vuejs Dynami c Div текст

0 голосов
/ 30 марта 2020

У меня есть Vue компонент с некоторыми данными внутри. У меня также есть элемент, который привязывается к данным внутри тега script компонента. Проблема в том, что я использую другой компонент для передачи данных sh к этому, поэтому div должен динамически меняться при отправке новых данных. Однако в моем случае этого не происходит. Хотя данные (если я console.log их) изменяются, div также не изменяется динамически. Вот код: 

 Main component:
<template>
  <div class="small">
    <div v-text="x">{{x}}</div>
  </div>
</template>

<script>



  export default {
    components: {
      ExternalComponent
    },
    data() {
      return {
        x: 0
      }
    },
    async mounted() {

    },
    methods: {
      receiveData(data) {
        this.x = data;
      }

    }
  }
</script>

<style>
</style>

External component: 
 <template>
      <div class="R">
      </div>
    </template>

    <script>


      import MainComponent from './MainComponent'

      export default {
        components: {
          MainComponent
        },
        data() {
          return {

          }
        },
        async mounted() {

        },
        methods: {
             clickListener() {
                $('.R').on('click', function(event) {
                   MainComponent.methods.receiveData(12)
                });
            }

        }
      }
    </script>

    <style> 
    </style>

По сути, я хочу, чтобы это передавалось и читалось из div в MainComponent каждый раз, когда что-то щелкает во внешнем компоненте (потому что будут отправлены данные другого типа).

1 Ответ

1 голос
/ 30 марта 2020

Вы не можете передавать данные между такими компонентами.

Для родительского -> дочернего взаимодействия используйте реквизиты: https://vuejs.org/v2/guide/components.html#Passing -Data-to-Child-Components-with-Props

Для дочерних -> родительских коммуникаций используются события: https://vuejs.org/v2/guide/components.html#Listening -в-дочерним-компонентам-событиям

Для более сложных коммуникаций вы можете использовать vuex

Другая опция для прямого вызова метода на дочернем компоненте - через ссылки: Как получить доступ к дочернему методу от родителя в vue. js

...