vue布局中怎么引用参数_Vue组件参数传递问题

Vue组件参数传递问题

组件中的data为什么是函数？

组件中的数据是保存在哪里呢？顶层的Vue实例中吗？并不是的，组件无法访问Vue实例中的data。即使可以访问，如果所有组件的数据都在顶级Vue实例中，那么Vue中的data会十分的臃肿。组件中的数据应该由自己管理。

组件是一个单独功能模块的封装，这个模块有属于自己的HTML模板，也应该有属于自己的数据data，不过这个data是一个函数。这是为什么呢？

这是为了保证组件复用时，属性之间的隔离。利用方法都会重新开辟内存空间的机制。当创建多个相同组件实例时，不同组件实例之间的data必须保证不被共享

父子组件通讯之props(父->子)

需求1：在页面中，父组件请求得到的数据需要在子组件中展示。

需求2：子组件很多，每次创建都要向后他发送数据，在父组件中进行请求，将数据传递给子组件展示。

Vue中提供了props用于父组件向子组件中传递数据

在子组件中，使用props声明需要从父级接收到的数据

props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的属性名称。

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

数组形式的传递

1、在父组件中创建数据

data() {

return {

userId: "rayfoo",

name:'rayfoo',

hobby: [&#