Question

我有一个子组件，基本上是一个搜索框。当用户键入内容并按Enter键时，将触发一个事件，该事件以搜索主题进入父级：

export default {
  name: "SearchBar",
  methods: {
    searchRequested(event) {
      const topic = event.target.value;
      this.$emit('searchRequested', topic);
    }
  }
};

父级收到事件并更新与其其他子级（图片库）相关的道具：

<template>
  <div id="app">

    <SearchBar @searchRequested="onSearchRequested($event)" />
    <Images :topic="topic" />

  </div>
</template>

<script>
import SearchBar from './components/SearchBar.vue'
import Images from './components/Images.vue'

export default {
  name: 'app',
  components: {
    SearchBar,
    Images
  },
  data() {
    return {
      topic: ''
    };
  },
  methods: {
    onSearchRequested(topic) {
      this.topic = topic;
    }
  }
}
</script>

到目前为止，太好了。但是现在，我希望子组件在用户执行新搜索时将与搜索到的主题相关的图像加载到自身。为此，子组件Images必须了解其属性topic的变化，因此我创建了一个计算所得的子组件：

import { ImagesService } from '../services/images.service.js';

export default {
  data() {
    return {
      topic_: ''
    };
  },
  methods: {
    updateImages() {
      const images = new ImagesService();
      images.getImages(this.topic_).then(rawImages => console.log(rawImages));
    }
  },
  computed: {
    topic: {
      get: function() {
        return this.topic_;
      },
      set: function(topic) {
        this.topic_ = topic;
        this.updateImages();
      }
    }
  }
};

但是不幸的是，setter从未被调用。我不得不说我是Vue的新手，所以可能我在做错什么。任何帮助将不胜感激。

Answer 1

您不需要在主组件中创建计算。图片组件已经知道主题prop中的更改。您需要注意主题的变化，并在“ Images.vue”中执行异步操作。 Vue的观察者有可能。

Vue docs watchers

'./ components / Images.vue'

<template>...</template>
<script>
export defult {
 props: ['topic'],
 data(){
   return {
        images: []
    }
 },
 watch: {
    topic(newVal){
       // do async opreation and update data.
       // ImageSerice.get(newVal)
       //   .then(images => this.images = images)
     }
  }
}
</script>

Vue：让子组件知道由其父组件修改的属性中的更改

1 个答案: