Vue 使用 props 传递数据

• 基本用法：

1.        组件不仅仅是要把模板内容进行复用，更重要的是组件间要通信。 通常父组件的模板中包含子组件，父组件要正向的向子组件传递数据或参数，子组件接收到参数后，根据参数的不同来渲染不同的内容或执行操作。这个正向传递数据的过程就是要通过props来实现的。

2. 在组件中，使用选项 props 来声明需要从父级接受的数据，props 的值可以是两种，一种是字符串数组，一种是对象。比如：

   

   运行结果如图：

3. props 中声明的数据与组件 data 函数 return的数据主要区别就是props 来自父级，而data中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template 及 计算属性 computed 和 methods 中使用。当传递的数据是来自父级的动态数据，可以使用v-bind 来动态绑定props 的值，当父组件的数据变化时，也会传递给子组件。上图中 parentMessage就来自父组件的动态数据传递使用了v-bind(语法糖：parentMessage),注意当你传递的是数字、布尔值、数组、对象，如果不用v-bind ，传递的仅仅是字符串!!!.。

4. 另外补充一点：在使用过程中发现组件的template必须有且仅有一个根节点，否则会报错如下，做一下记录，以免犯错：

如上图，此处必须要用一个根节点包裹。

 

 

 

1.