vue.js - правильный способ передачи данных от ребенка к компоненту?

Question

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

Скажем, у меня есть этот корень экземпляр:

const app = new Vue({ 
    el: '#app', 

    data: { 
     foo: 'bar' 
    }, 
}); 

Тогда у меня есть компонент в отдельном файле .vue:

<template> 
    <div>I'm a component!</div> 
</template> 

<script> 
    export default { 
     methods: { 
      fooTest: function() { 
       console.log(this.$root.$data.foo); 
      }, 
     }, 

     mounted() { 
      this.fooTest(); 
     } 
    } 
</script> 

Это прекрасно работает. fooTest получит «bar» из данных корневого экземпляра.

Но это правильный способ сделать это? Или что такое лучшая практика?

Answer 1

Вы не должны использовать this.$root.$data. Он может работать пока, но ваши усилия по отладке будут значительно выше, когда ваше приложение будет расти. Это будет кошмар, когда вы работаете с командой разработчиков в том же приложении.

Вместо этого вы должны использовать надлежащую связь между родителем и ребенком. Вот официальные документы для этого:

От родителя к ребенку: https://vuejs.org/guide/components.html#Passing-Data-with-Props

От ребенка к родителю: https://vuejs.org/guide/components.html#Using-v-on-with-Custom-Events

Вот еще одна ссылка на StackOverflow, чтобы помочь вам: https://stackoverflow.com/a/40181591/654825

jsFiddle Например, в этом справочном ответе есть случай, когда родительский компонент передает данные дочернему устройству, а дочерние компоненты передают события родителям.

Короче говоря, родитель может передавать данные ребенка и слушать ребенок события следующим образом:

<child-component :data-from-parent="someValue" v-on:event-from-child="methodInParent"></child-component> 

И ребенок компонент может получить вышеуказанные данные от родителей следующим образом:

Vue.component('child-component', { 
    props: ["dataFromParent"], 
    ... 
}); 

Вы можете следуйте этому примеру jsFiddle, чтобы лучше понять, как работает это общение.

Последний вопрос

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Смежные вопросы

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.