当填充特定值但仅一次时，如何在Vue.js组件上调用方法 父项子组件

如何解决当填充特定值但仅一次时，如何在Vue.js组件上调用方法 父项子组件

我正在开发一个使用Vue.js（当前为2.6.11版）的应用程序，随着应用程序的增长，我经常看到一种模式：我想抽象一些功能，因此提取了一个新组件，但是当我在mounted钩子中将某些代码从父级复制到子级时，以前可用的某些数据现在未定义。有时数据来自道具，而其他时候则来自Vuex商店。

我认为问题出在以下事实：与我最初的想法相反，内部组件先于外部组件进行了初始化。

这里是一个例子：

父项

<template>
    <div class="options-container">
        <features-list />
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import FeaturesList from '../features/FeaturesList.vue';

export default {
    name: 'ProductComponent',components: {
        FeaturesList,},computed: {
        ...mapGetters('product',[
            'userSelection',]),mounted() {
        // here I can call the methods which rely on UserSelections
        // the variable UserSelections has already a value here
        const params = this.getTemplateCollectionParams();
        this.getTemplateAssets(params);
    },};
</script>

子组件

<template>
    <div class="options">
        <template v-for="key in sortedFeaturesLayout">
            <feature-base-component
                :option="options[key]"
                :key="key"
                v-on="$listeners"
            />
        </template>
    </div>
</template>
<script>
import FeatureBaseComponent from './FeatureBaseComponent.vue';
import { mapGetters } from 'vuex';

export default {
    name: 'FeaturesList',components: {
        FeatureBaseComponent,methods: {
        getTemplateCollectionParams() {
            // ...
        },getTemplateAssets(params) {
            // ...
        },mounted() {
        // here I have an error because `userSelection` is still empty
        const params = this.getTemplateCollectionParams();
        this.getTemplateAssets(params);
    },};
</script>

我通常要做的是在值上创建一个监视程序，然后在监视程序的更新上调用该函数。由于原始代码仅执行一次，因此我想检查此方法是否也仅调用一次，因此添加一个布尔值，以检查该代码是否已执行。

<template>
    <div class="options">
        <template v-for="key in sortedFeaturesLayout">
            <feature-base-component
                :option="options[key]"
                :key="key"
                v-on="$listeners"
            />
        </template>
    </div>
</template>
<script>
import FeatureBaseComponent from './FeatureBaseComponent.vue';
import { mapGetters } from 'vuex';

export default {
    name: 'FeaturesList',data() {
        return {
            isFirstLoad: true,};
    },watch: {
        userSelection() {
            // get gallery
            if (this.isFirstLoad) {
                // here I need the getter userSelection which is empty on `mounted`
                const params = this.getTemplateCollectionParams();
                this.getTemplateAssets(params);
                this.isFirstLoad = false;
            }
        },};
</script>

我认为我所做的并非完全错误。但是，我想知道是否只有在道具第一次具有值时才执行方法的更简洁的方法，因为有时我会得到大量布尔值，这些布尔值仅用于此目的。

解决方法

您也可以使用vm.$watch，它返回一个unwatch函数，可以调用该函数停止后续的回调：

const unwatch = this.$watch('userSelection',userSelection => {
  //...

  // stop watching
  unwatch()
})

这样做的好处是不需要额外的标志来检查监视处理程序是否已被调用，并且监视程序仅被调用一次。