Изменить переменную в дочернем компоненте через родительский

Question

В дочернем компоненте есть переменная которую нужно очищать через родительский компонент. К примеру чтобы при нажатии на кнопку в род. компоненте очищалась переменная в дочернем. Как можно это реализовать? Вот пример:

Род. компонент
<template>
  <div>
     <button @click="changeVar">
        btn
     </button>
     <Child/>
  </div>
</template>

<script>
import Child from "@/components/Child";

export default {
  components: {
    Child
  },
  methods: {
     changeVar(){
        // Менять переменную в доч. компоненте 
     }
  },
};
</script>

Дочерний компонент
<template>
  <div>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      var: "", // Переменная которую нужно менять
    };
  },

};
</script>

Answer 1

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

Для этого достаточно передать данные дочернему компоненту в качестве атрибутов, при его использовании из родительского компонента:

<test :variable="variable"></test>

И обязательно объявить эти данные в дочернем компоненте в props

...
props: ['variable'],
...

По умолчанию все данные, объявленные в props дочернего компонента являются реактивными и однонаправленными. Будьте внимательны: при попытке изменить эти данные из дочернего компонента вы получите сообщение о том, что это плохая практика. props используется для передачи данных дочернему компоненту и обеспечивает их реактивное обновление, в случае обновления данных в родительском компоненте. Если вам нужна двусторонняя привязка данных - лучше посмотреть в сторону v-model

Более подробно - Входные параметры

Наглядный пример:

const test = Vue.component('test', {
  props: ['variable'],
  template: `<div>{{ variable }}</div>`
})

new Vue({
  el: '#app',
  data() {
    return {
      variable: false
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <test :variable="variable"></test>
  <button @click="variable=!variable">Изменить из родителя</button>
</div>

БЛОГ НА HUSL

Изменить переменную в дочернем компоненте через родительский

Ответы (1 шт):