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

【问题标题】：Can Vue component have both data and props?Vue 组件可以同时拥有 data 和 props 吗？
【发布时间】：2018-05-29 19:09:48
【问题描述】：

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

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

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

限制：仅在组件中使用时接受 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 进行比较的话）和财产公有吗？

【问题讨论】：

两者都可以，props 由父组件接收，data 由组件操作。 props 是静态的（可由父级更改），而 data 是动态的（但不能由父级更改）。
太棒了。你能回答一下吗:)？
@Karl-AndréGagnon 我总是更改组件中的道具值！这是好习惯吗？
@DavidJorHpan 这不是一个好习惯，Vue 不应该允许你这样做。你没在控制台看到错误信息吗（比如这个例子：jsfiddle.net/6yyqzog8）
@Karl-AndréGagnon 我只在道具类型 array or object 上做，他们没有显示控制台错误！对于字符串类型的 prop ，我使用 $emit !!

标签： javascript vue.js

【解决方案1】：

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

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

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

Vue documentation

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

【讨论】：