props传递对象_vue组件中使用props传递数据的实例详解

在 Vue 中，父子组件的关系可以总结为 props向下传递，事件向上传递。父组件通过 props 给子组件下发数据，子组件通过事件给父组件发送消息。看看它们是怎么工作的。

一、基本用法

组件不仅仅是要把模板的内容进行复用，更重要的是组件间要进行通信。

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

1.1　字符串数组：

Vue.component('my-component4',{

props: ['message'],

template: '

{ {message}}

'

});

var app4 = new Vue({

el: '#app4'

});

渲染后的结果为：

props 中声明的数据与组件data 函数return 的数据主要区别就是props 的来自父级，而data 中的是组件自己的数据，作用域是组件本身，这两种数据都可以在模板template 及计算属性computed和方法methods 中使用。

上例的数据message 就是通过props 从父级传递过来的，在组件的自定义标签上直接写该props 的名称，如果要传递多个数据，在props 数组中添加项即可。

有时候，传递的数据并不是直接写死的，而是来自父级的动