Vue.js：为什么我不能将外部属性绑定到子道具组件？

Question

我有一个关于 Vue.js 的问题，我想我遇到了一些棘手的问题。

我无法将传递的属性绑定为组件属性来对此数据执行一些操作，这是我的代码，问题正在影响 Plot 组件。

这是我的仪表板组件，它是父级：

<template>
  <div>
    <div v-if="!hasError && countryData">
      <div v-if="loading" id="dashboard" class="ui two column grid sdg-dashboard sdg-text-center active loader">
      </div>
      <div v-else id="dashboard" class="ui two column grid sdg-dashboard">
        <div class="column sdg-text-center">
          <MapDisplay :country="countryData" :latitude="latData" :longitude="lonData"/>
        </div>
        <div class="column">
          <TopicSelector v-on:topicSelectorToParent="onTopicSelection" :goals="goalsData"/>
        </div>
        <div class="two segment ui column row sdg-text-center">
          <Plot :topic-selection-data="topicSelectionData"/>
        </div>
      </div>
      <sui-divider horizontal><h1>{{ countryData }}</h1></sui-divider>
    </div>
    <div v-else>
      <NotFound :error-type="pageNotFound"/>
    </div>
  </div>
</template>

<script>
import NotFound from '@/views/NotFound.vue';
import MapDisplay from '@/components/dashboard/MapDisplay.vue';
import TopicSelector from '@/components/dashboard/TopicSelector.vue';
import Plot from '@/components/dashboard/Plot.vue';

const axios = require('axios');

export default {
  name: 'Dashboard',
  components: {
    NotFound,
    MapDisplay,
    TopicSelector,
    Plot
  },
  props: {
    countryCode: String
  },
  data: function() {
    return {
      loading: true,
      hasError: false,
      country: this.countryCode,
      //Country, lat, lon
      countryData: null,
      latData: null,
      lonData: null,
      //Goals provided to Topic Selector
      goalsData: null,
      //Selected topic provided by Topic Selector
      topicSelection: null,
      //Topic Data provided to Plot component
      topicData: null, //All topic data
      topicSelectionData: null,
      pageNotFound: "Error 500 : Cannot connect get remote data."
    }
  },
  created: function() {
    const api = process.env.VUE_APP_SDG_API_PROTOCOL + "://" + process.env.VUE_APP_SDG_API_DOMAIN + ":" + process.env.VUE_APP_SDG_API_PORT + process.env.VUE_APP_SDG_API_ROUTE;
    axios.get(api + "/countrycode/" + this.countryCode)
      .then(response => {
        this.countryData = response.data.data.country;
        this.latData = response.data.data.coordinates.latitude;
        this.lonData = response.data.data.coordinates.longitude;
        this.goalsData = response.data.data.goals.map(goal => {
          return {
            goal_code: goal["goal code"],
            goal_description: goal["goal description"]
          }
        });
        this.topicData = response.data.data.goals;
      })
      .catch(() => this.hasError = true)
      .finally(() => this.loading = false);
  },
  methods: {
    onTopicSelection: function(topic) {
      this.topicSelection = topic;
      this.topicSelectionData = this.topicData.filter(goal => this.topicSelection.includes(goal["goal code"]));
    }
  }

  }
</script>

<style scoped lang="scss">
  #dashboard {
    margin-bottom: 3.1vh;
    margin-left: 1vw;
    margin-right: 1vw;
  }
</style>

这是他的孩子的 Plot 组件：

<template>
  <div id="plot">
    topic data : {{ topicData }}<br>
    topicSelectionData : {{ topicSelectionData }}
  </div>
</template>

<script>
export default {
  name: 'Plot',
  props: {
    topicSelectionData: Array
  },
  data: function() {
    return {
      topicData: this.topicSelectionData //This line is not working =(
    }
  }
}
</script>

<style scoped lang="scss">
</style>

我可以在{{ topicSelectionData }} 中看到我的数据，但是当我将其绑定到topicData 时，我无法使用{{ topicData }} 检索数据或在使用topicData 作为输入的方法中执行某些操作。

你能给我一些帮助吗？

问候

Answer 1

您需要在mounted 上分配值，如下所示：

data() {
    return {
         topicData: ''
    }
},
mounted(){
     this.topicData = this.topicSelectionData;
}

并且为了在父级中的值更改时更新子级：

watch: {
     topicSelectionData: function(newValue, oldValue) {
           this.topicData = newValue;
     }
},