Vue data()、props及ref

1.props 与data() 区别

1.1. props

将数据从父组件传递到子组件的方式

当我们从组件内部访问props时，组件并不拥有它们，不能更改它们

虽可以更改组件中的属性，但这是一个非常糟糕的主意。Vue 会发出警告 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.。

1.2. data()

每个组件的私有内存，其他组件不能访问它。

理论上是其它组件是不能访问这些数据，但实际是可以的。

如果需要向组件传递数据，可以使用props向下传递数据(传递给子组件)，或者使用事件($emit)向上传递数据(传递给父组件)。

1.3. 相同点

都是响应式(computed 也是)，不用过多考虑组件何时更新， 不必每次更改 data 都调用setState

1.4. 命冲突

this.props.propA与this.data.dataA，可以简写为this.propA 和 this.dataA;

在data和 props中使用相同的名称,Vue 会给你一个警告

2. ref

//子组件 refSub.vue
<template>
	<view>
		{
  { msg }}
	</view>
</template>

<script> 
	export default {
     
		data() {
    
			return {
    
				msg:"sub msg"