Vue.js 中的组件中的 props 和 data 有什么区别？

在 Vue.js 中,props 和 data 都是组件实例的属性,但是有以下区别:
props:

1. 是只读的,由父组件传递给子组件。
2. 可以指定验证规则。
3. 更适合传递参数数据。

使用方式:

js
// 父组件
<child :msg="parentMsg"></child> 

// 子组件
props: ['msg']  

data:

1. 是可读可写的,用于组件自身内部数据。
2. 不可以指定验证规则。
3. 更适合维护组件的内部状态。

使用方式:

js  
data() {
  return {
    msg: 'Hello'
  }  
}

示例:
父组件:

html
<child :parent-msg="msg"></child>

子组件:

js
props: ['parentMsg']  
data() {
  return {
    childMsg: 'Hi'
  }
}

模板:

html
<p>{{parentMsg}}</p>  
<p>{{childMsg}}</p>

渲染结果:

Hello  
Hi

props 用于父组件向子组件传递数据,子组件只能读取不可修改。
data 用于组件自身管理内部状态,可读可修改。