Как передать значение родительского компонента и дочернего компонента, vuejs?

Question

У меня есть следующий шаблон родительского компонента:

<template>
    <v-card class="pa-3 teal darken-3" flat height="100%">
        <ReportesViales v-bind:visualizar="sheet"></ReportesViales>
        <l-map class="map"  :zoom="zoom" :center="center" :options="{ zoomControl: false }">
            <l-tile-layer :url="url"></l-tile-layer>
            <l-marker :lat-lng="marker">
                <l-popup></l-popup>
            </l-marker>
            <l-control position="bottomleft" >
                <v-btn flat icon color="indigo" @click="ubicacion">
                    <v-icon>my_location</v-icon>
                </v-btn>
                 <v-btn flat icon color="indigo" @click="sheet = true">
                    <v-icon>add_alert</v-icon>
                </v-btn>
            </l-control>
        </l-map>
    </v-card>
</template>

, и у меня есть дочерний компонент с именем 'ReportsViales'.

В который я отправляю в качестве параметра переменную 'sheet'в основном это может быть true или false, логический тип.

В дочернем компоненте я получаю его следующим образом:

<template>
    <v-bottom-sheet v-model="visualizar">
        <v-list>
            <v-subheader>Opciones</v-subheader>
            <v-list-tile
            v-for="tile in tiles"
            :key="tile.title"
            @click="visualizar = false"
            >
            <v-list-tile-avatar>
                <v-icon :color="tile.color">{{tile.icon}}</v-icon>
            </v-list-tile-avatar>
            <v-list-tile-title>{{ tile.title }}</v-list-tile-title>
            </v-list-tile>
        </v-list>
    </v-bottom-sheet>
</template>
<script>
import firebase from 'firebase';
export default {
    props:['visualizar'],
    data(){
        return {
            tiles: [
                { icon: 'notification_important', title: 'Solicitar apoyo', color: '#00695C', tipo: 1 },
                { icon: 'warning', title: 'Reportar alerta', color: '#01579B', tipo: 2 },
                { icon: 'commute', title: 'Transito pesado', color: '#1B5E20', tipo: 3  },
                { icon: 'directions_car', title: 'Transito fluido', color: '#3E2723', tipo: 4 },
                { icon: 'departure_board', title: 'Bloqueado totalmente', color: '#FF3D00', tipo: 5 }
            ]
        }
    }
}
</script>

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

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

Answer 1

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

Теперь это зависит от того, чего вы пытаетесь достичь, хотите ли вы, чтобы какие-либо изменения в visualizar распространялись также на родительский компонент, или родительский элемент просто предоставляет значение по умолчанию / начальное значение, а также любые изменения в ребенок будет только преходящим и не касаться родителей?

Для синхронизации значения свойства вы можете использовать модификатор .sync (https://vuejs.org/v2/guide/components-custom-events.html#sync-Modifier).

Просто передайте свойство как visualizar.sync="sheet" и внутри дочернего элемента создайте событие обновления вместо непосредственного изменения visualizar:

// replace this:
// @click="visualizar = false"
// with
@click="$emit('update:visualizar', false)"

Vue заботится об остальных и синхронизирует их.

Если родитель не заботится о каких-либо изменениях visualizar, просто используйте вместо него локальную переменную data:

//in child:
data() {
  return {
    ...
    localVisualizar: this.visualizar,
  }
}