vue props父子传值

Vue是一种用于构建Web界面的JavaScript框架，props是Vue中用于进行组件间传值的机制，可以说是父子组件间传递数据的主要方式。

Vue中的props被用来传递数据，但是props传递到子组件中的数据是只读的，也就是无法在子组件中直接修改。这是一种良好的编码实践，遵循单向数据流的规则，保证了应用的可预测性和可维护性。

父组件通过在子组件内部定义props来传递数据。子组件通过props选项接收数据并将其渲染到模板中。父子组件之间的数据传输是通过props选项进行的，包含在组件的声明中，使用kebab-case（类似于HTML中的属性名）命名。

在父组件中，将要传递的属性作为对象传递给子组件，例如：

<child-component v-bind:props-name="propsVal"></child-component>

而在子组件中，使用props选项声明该属性，例如：

props: {
propsName: {
type: String,
default: ''
}
}

子组件中使用v-bind语法将props属性绑定到子组件的data对象中，这样就可以在子组件内部使用props属性。例如：

<template>
<div>{{propsName}}</div>
</template>

Vue的props机制是一种非常方便的父子组件通信方式，适用于组件进行状态管理和跨层级数据传输。但是需要注意的是，在使用props时需要遵循单向数据流的规则，避免在子组件内部直接修改props属性，避免意外的错误产生。