在子组件中查看属性不起作用答案

【问题标题】：Watching properties in child component does not work在子组件中查看属性不起作用
【发布时间】：2021-06-03 12:26:24
【问题描述】：

我有 2 个组件，一个父级和一个子级。我想修改父组件中道具的值（通过单击按钮时调用方法）并将其发送到子组件。在子组件中，我想观察我的道具的变化，以便在它发生变化时，它会做一些事情（出于测试目的，我尝试console.log()道具）。

家长：

<template>
    <div>
        <h5>Your Feeds</h5>
        <div id="feeds">
            <div class="card" v-for="feed in feeds">
                <div class="card-body" :id="feed['_id']" >
                    {{ feed['name'] }}
                    <button v-on:click="loadFeed(feed['_id'])">Button</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import GridComponent from "./GridComponent";
export default {
    name: "FeedsListComponent",
    data() {
        return {
            feeds: []
        }
    },
    mounted() {
        axios
            .get("/getFeeds")
            .then(response => (this.feeds = response.data))
            .catch(error => console.log(error))
    },
    methods: {
        loadFeed(id) {
            this.feedId = id
        }
    },
    components: {
        GridComponent
    }
}
</script>

孩子：

<template>
    <div id="grid">
        <v-grid
            theme="compact"
            :source="rows"
            :columns="columns"
        ></v-grid>
    </div>
</template>

<script>
import VGrid from "@revolist/vue-datagrid";
export default {
    name: "Grid",
    props: ['feedId'],
    data() {
        return {
            columns: [],
            rows: [],
        };
    },
    watch: {
        feedId: function(val, oldVal) {
            console.log(val)
            console.log(oldVal)
            console.log(this.feedId)
            //here I want to send an ajax request with feedId to one of my controllers in order to get  
            //the data needed for rows and colums
        }
    },
    components: {
        VGrid,
    },
};
</script>

【问题讨论】：

父组件没有使用子组件
@shob 你能再解释一下吗？我应该怎么做才能包含子组件？在父模板中包含<child :propMessage="message" /> 就足够了吗？
为了有父母和孩子，父母必须在其模板中使用孩子。例如<div><grid :feed-id="feedId"></grid></div>

标签： vue.js vuejs2 vue-component

【解决方案1】：

我整理了一个有效的样本，以帮助您诊断为什么您的无效：

父.vue

<template>
  <div class="parent">
    <h3>Parent</h3>
    <div class="row">
      <div class="col-md-6">
        <button class="btn btn-secondary" @click="incrementCounter">Change parent message</button>
      </div>
    </div>
    <child :propMessage="message" />
  </div>
</template>

<script>
  import Child from '@/components/stackoverflow/watch-prop/Child'

  export default {
    components: {
      Child
    },
    data() {
      return {
        counter: 0
      }
    },
    computed: {
      message() {
        return 'Message' + this.counter;
      }
    },
    methods: {
      incrementCounter() {
        this.counter++;
      }
    }
  }
</script>

Child.vue

<template>
  <div class="child">
    <hr>
    <div class="row">
      <div class="col-md-6">
        <label>Message in child from watched prop:</label>{{ dataMessage }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      propMessage: {
        type: String,
        required: true
      }
    },
    data() {
      return {
        dataMessage: this.propMessage
      }
    },
    watch: {
      propMessage(newMessage) {
        this.dataMessage = newMessage;
      }
    }
  }
</script>

<style scoped>
  label {
    font-weight: bold;
    margin-right: 0.5rem;
  }
</style>

【讨论】：