Vue 组件可以同时拥有 data 和 props 吗？

Question

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

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

在有关组件的基本文档中，没有使用数据对象，只有道具。 然而，数据文档提到了组件：

限制：仅在组件定义中使用时接受 Function。

甚至还有例子：

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由组件操作。 道具是静态的（可由父级更改），而数据是动态的（但不能由父级更改）。

子组件影响属性的唯一方法是发出事件。 父组件可以侦听这些事件并接收和接收有效负载参数中的任何内容。 在侦听器函数中，他们可以更改自己的数据，并且子属性也将被更新。 这被称为单向数据流：

所有的 props 在子属性和父属性之间形成一个单向向下的绑定：当父属性更新时，它会向下流向子属性，但不会反过来。 这可以防止子组件意外改变父组件的状态，从而使您的应用程序的数据流更难理解。

Vue 文档

如果你是视觉的，这里有一个小架构：