Как отправить данные из родительского в дочерний компонент в Vue.js

Question

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

Что я хочу сделать:

У меня есть родительский компонент, имеющий несколько кнопокс разными идентификаторами.

Дочерний компонент будет ожидать отправки этих идентификаторов родителем и решит, что отображать на основе идентификатора.Вот и все.

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

Я пришел из фона React иЯ все еще в замешательстве.

Родительский компонент

<template>
  <button id="btn1">Show banana</button>
  <button id="btn2">Show orange</button>
</template>
<script>
  export default {
   name: 'Parent',
   data: function {
       //something
   },
   props: {
      // ?????
   }
  };
</script>

 **Child component**



    <template>
      <p v-html="something.text">
    </template>
    <script>
      export default {
       name: 'Child',
       data: function() {
         something: ''
         if(id from parent === id I want) {
             something = object.withpropIneed
          }
       },

      };
    </script>

Answer 1

Решил мою проблему, приняв другой подход. Я реализовал состояние, и мой компонент ведет себя именно так, как я хотел.

Я нашел эту ссылку полезной для меня и решил мою проблему. Спасибо.

Answer 2

Просто ради этого, я думаю, вы искали это:

<template>
  <button id="btn1" @click = "id = 1">Show banana</button>
  <button id="btn2" @click = "id = 2">Show orange</button>
  <child-component :childid = "id"></child-component>
</template>
<script>
  import childComponent from 'childComponent'
  export default {
  name: 'Parent',
  data () {
      return {
        id: 0
      }
  },
  components: {
    childComponent
  }
  };
</script>

**Child component**



    <template>
      <p v-html="something.text">
    </template>
    <script>
      export default {
      name: 'Child',
      props: {
        childid: String 
      },
      data: function() {
        something: ''
        if(this.childid === whatever) {
            something = object.withpropIneed
          }
      },

      };
    </script>

Answer 3

Вам нужно отобразить данные от родителя и передать их ребенку, вот и все! В примере я делаю передачу строки html и привязки, которую html получил через prop 'fromParentHtml', сопоставленный на child, поэтому внутри дочернего компонента this.fromParentHtml передаётся в существует, потому что он определен в props, и каждый раз, когда вы нажимаете в родительской кнопке, выполняется Функция 'show' и изменить значение с пропущенной проповеди на дочернюю через родительские данные 'html' .. =)

<template>
    <div>
        Current html sent to child '{{html}}'
        <br>
        <button @click="show('banana')">Banana</button>
        <button @click="show('orange')">Orange</button>
        <button @click="show('apple')">Apple</button>

        <!-- Create child component -->
        <child-component :fromParentHtml="html"></child-component>

    </div>
</template>

<script>
    export default {

        name: "test3",
        components: {

            'child-component': {

                template: "<div>Child component... <br> <span v-html='fromParentHtml'></span> </div>",
                //Child component map a prop to receive the sent html from parent through the attribute :fromParentHtml ...
                props: {

                    fromParentHtml: {

                        required: true,
                        type: String
                    }
                }
            }
        },
        data(){

            return {

                html: ''
            }
        },
        methods: {

            show(fruit){

                this.html = '<span>The fruit is ' + fruit + ' !</span>';
            }
        }
    }
</script>

<style scoped>

</style>

Если вам помогли, отметьте как правильный ответ! Надеюсь, это поможет.

Редактировать 1: Предполагая, что у вас есть веб-пакет для работы с отдельными компонентами файла, для импорта другого компонента просто выполните:

<template>

    <div>
        <my-child-component></my-child-component>
    </div>

</template>

<script>

    //Import some component from a .vue file
    import ChildComponent from "./ChildComponent.vue";

    export default {

        components: {

            //And pass it to your component components data, identified by 'my-child-component' in the template tag, just it.
            'my-child-component': ChildComponent
        },
        data(){


        },
        methods: {


        }
    }

</script>