Vue 如何在具有父组件和自身的组件上设置属性？ [警告]

Question

我有一个组件，我将其用作嵌套组件（更多级别的组件），并由 vue-router 安装组件使用。有时我会从父级传递数据，或者将其设置在组件中。

我的组件：

module.exports = {
    props: {
        post: {
            default: Object
        }
    }
    mounted() {
        if( ! this.post.id) {
            this.$http.get('posts/' + this.$route.params.post).then((r) => {

                // This works fine    
                this.post.id = r.data.id

                // This gives warn, to avoid mutate property directly, 
                // because the parent will overwrite it.
                // But here, there is no parent (with post data)!
                // If I set post as data(), also gives a warn cause the props setting
                this.post = r.data

            })
        }
    },
    // other parts...
}

嵌套版本：

在嵌套方式中，我将属性传递给组件，如下所示：

<post :post="post"></post>

路由器版本

只是简单地将组件传递给路由器

{name : 'post/:post', component: Post}

如何在没有警告的情况下设置属性？（在我以两种不同方式使用该组件的情况下）我有很多属性一个 post，所以一个一个地添加它不是那么干净。我也不想在 <router-view :post="post"> 组件上设置。

Answer 1

不鼓励直接从子组件中更改父数据。

为了触发更改，子项可以发出一个事件，然后使用 v-on 指令调用父方法，然后更新数据，更新后的数据向下流动到子组件，它会自动更新。

阅读有关单向数据流的更多信息： https://vuejs.org/guide/components.html#One-Way-Data-Flow

// Post component
const post = Vue.component('post', {
  template: '#post-template',
  props: {
    post: {
      default: Object
    }
  },
  mounted() {
    // from child component just emit the change
    // and let parent handle the change
    this.$emit('load-post');
  }
});

// Root Vue Instance
new Vue({
  el: '#app',
  data() {
    return {
      post: {
        description: "waiting for post to load..."
      }
    }
  },
  methods: {

    getPost() {
   
      // perform your ajax request here 
      // and update the variable from parent.
  
      self = this;
      setTimeout(function() {
        self.post = {
          description: "this is some random description"
        }
      }, 2000)
    }
  },
  components: {
    post: post
  }
})

<script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>

<body>
  <div id="app">
    <post :post="post" v-on:load-post="getPost"></post>
  </div>
</body>

<template id="post-template">
  <div>
    Post: {{ post.description }}
  </div>
</template>

Vue 如何在具有父组件和自身的组件上设置 属性？ [警告]

Vue How to set property on a component with parent and in itself? [Warn]

vue.js

vue-router

Vue 如何在具有父组件和自身的组件上设置属性？ [警告]