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

如何传递父组件和子组件vuejs的值？

1 个答案: