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

vue组件中使用props传递数据的实例详解

2019-01-07

编程之家收集整理的这篇文章主要介绍了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 中的是组件自己的数据，作用域是组件本身，这两种数据都可