Vue组件可以同时拥有数据和道具吗？

Question

Vue中组件的标准示例如下：

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

在有关组件的基本文档中，没有使用数据对象，只有道具。但是documentation of data提到了组件：

  

限制：仅在组件中使用时接受函数   定义

甚至有例子：

var data = { a: 1 }

// direct instance creation
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// must use function when in Vue.extend()
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

这是否意味着组件可以拥有数据和道具？数据是私有财产（如果我们想与OOP比较）和财产公共财产吗？

Answer 1

组件可以包含props和data。它们之间的区别在于，props由父组件接收，而data由组件操纵。道具是静态的（可由父级更改），而数据是动态的（但不能由父级更改）。

子组件影响属性的唯一方法是发出事件。父组件可以侦听这些事件，并在payload参数中接收和接收任何内容。在监听器功能中，他们可以更改自己的数据，同时也会更新子属性。这称为单向数据流：

  

所有道具在子属性和父属性之间形成单向下绑定：当父属性更新时，它将向下流向子，但不是相反。这可以防止子组件意外地改变父级状态，这可能会使您的应用程序的数据流更难理解。

     

Vue documentation

如果你是视觉的话，这里有一个小模式：