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}

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

Answer 1

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

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

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

＆＃13;

// 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
  }
})

＆＃13;

<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>

＆＃13;

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

1 个答案: