如何传递父组件和子组件的值，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”作为参数发送到该变量，该变量基本上可以是真或假，布尔类型。

在子组件中我通过以下方式接收它：

<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>

它实际上对我有用一次，但是当我想继续使用此组件时，出现以下错误，并且子组件不再起作用：

避免直接修改 prop，因为每当父组件重新渲染时，该值都会被覆盖

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,
  }
}