组件中的数据存储的位置

组件中的数据存储的位置

组件的html部分可以存放在template标签中，并且template标签是独立在Vue实例外的， 若template中的数据也需要动态化的话，那动态数据存放在哪？ 是否同样存放在Vue实例中呢？ 验证Vue组件是否能使用Vue实例data中的数据： 报错：message没有定义 说明Vue组件不能使用Vue实例data中的数据。 即使组件能使用Vue实例中的数据，但是一个页面划分成若干个组件，每个组件中的数据都存放在Vue实例中的data里，会让Vue实例变得非常臃肿。

所以无论如何，Vue组件中的数据是不会存放在Vue实例中的。

因为Vue组件的原型链上有Vue实例的原型，所以Vue组件的数据应该存放在自己的data内。

Vue全局组件与局部组件

全局组件：只需要在main.js中导入一次，整个项目都可以直接使用。 1、导入全局组件： import popManager from './components/popManager.vue' 2、注册全局组件： Vue.component('popManager',popManager) 局部组件：在需要用到的地方导入。

VUE如何封装一个组件

    1.    在compoents文件夹中新建一个vue文件（以Swiper为例）    2.    在main.js中全局引入，先import再注册到VUE中        3.    接着就可以在任何页面直接使用自己定义的组件    Swiper组件中需要一个存放图片的数组（以list为例）     父组件往子组件中传值       子组件中规定接收值的类型，还可以设置默认值(要注意数组默认值的写法)

VUE 编写后台常用的组件

前几篇文章我们已经把后台的基础搭建好了，感兴趣的朋友可以点击一些链接，查看之前的基础搭建 我们先看看传统的form表单（这里以element ui为例） 下面开始搜索组件的编写 在src/components/下创建FilterForm.vue组件 以上就是我们的主体部分了，下面我们就来看看怎么使用吧。 我们在src/home.vue页面引入 这样我们的搜索组件就已经完成了。

下面我们就可以使用最少的代码进行组件的调用了。

下一章我们一起完成table组件的编写。让我们的table简单。 每天学习一点，进步一点。

vue components

vue组件使用分三步： 以上是组件的简单使用方法。 (2) 动态传递： wepy中的写法： https://tencent.github.io/wepy/document.html#/?id=%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%E4%B8%8E%E4%BA%A4%E4%BA%92 通过父组件向子组件传不同的值作为标识，可以有针对性的对各父组件进行个性化的操作。