组件可以访问Vue实例数据吗

组件是一个单独功能模块的封装：
这个模块有属于自己的HTML模板，也应该又属于自己的data数据

组件中的数据是保存在哪里呢？顶层的Vue实例中吗？
经过测试 我们发现是不能访问的，即使可以访问，如果将所有数据都放在Vue实例中，Vue实例就会变得非常臃肿，Vue组件应该有自己保存数据的地方 组件对象也有一个data属性（组件的原型就是指向Vue的，也可以有methods属性，生命周期） 只是这个对象属性必须是一个函数，而且这个函数返回一个对象，对象内部保存着数据

为什么组件data属性必须是函数
写成函数形式：如果复用组件的话，它们并不是共用同一个对象，每次调用组件的时候都会data属性都会renturn一个新的对象，函数在每次执行的时候都会创建一个新的栈空间，他们的内存地址都不一样，保证各个组件之间使用变量不会仙相互影响，组件都是要复用的，但是要保证每个复用的地方都要有自己的逻辑
每一个组件都需要有一个data来保存属于自己的状态

原文地址：https://blog.51cto.com/13550695/2460979

时间： 2024-10-08 10:41:55

组件可以访问Vue实例数据吗的相关文章

Vue实例 中的常用配置项

创建Vue实例时,使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项},所有的Vue组件都是Vue实例,并且接受相同的选项对象(一些根实例特有的选项除外) 如: new Vue({//选项配置 el: '#app', components: { App }, template: '<App/>' }) 配置项一共可以分为六大类:数据.DOM.生命周期钩子.资源.组合.其他 一.数据 (1)data:Vue根实例或者当前组件上的数据对象,类型可

vue邪道玩法 : 把vue实例存在别的地方，以及可能会遇到的问题

一般来说,VUE项目中,this指向VUE实例. 但有的时候,某些代码会改变this的指向. 这时,可以用一个临时变量存储VUE实例. test1(){ var _this = this // 把vue实例的引用存一份 var arr = [imageObject,imageObject,imageObject] for (let i in arr) { arr[i].onload = function() {/* 此时的this指向被改变了 */} } } 但有时,你可能不得不在一开始就存一份

Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 Vue环境:本地导入和cdn导入 2.Vue是渐进式js框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目.3.怎么使用vue 去官网下载然后导入 <div id="app">

vue实例和组件的属性

vue实例: import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ el: '#app', //渲染目标 template: '<App />', //渲染内容 components: { //内容内使用到的组件 App: app }, data:{ //需要用到的数据,根实例一般不需要用 num1: 5, num2: 8, }, methods:{ //需要用到的

vue.js组件之j间的通讯一 子组件接受父祖件数据

Vue2.0的三种常用传值方式.父传子.子传父.非父子组件传值 在Vue的框架开发的项目过程中,经常会用到组件来管理不同的功能,有一些公共的组件会被提取出来.这时必然会产生一些疑问和需求?比如一个组件调用另一个组件作为自己的子组件,那么我们如何进行给子组件进行传值呢?如果是电商网站系统的开发,还会涉及到购物车的选项,这时候就会涉及到非父子组件传值的情况.当然你也可以用Vuex状态管理工具来实现,这部分我们后续会单独介绍.我先给大家介绍Vue开发中常用的三种传值方式. Vue常用的三种传值方式有:

Vue 实例中的生命周期钩子

Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑. Vue 实例 在文档中经常会使用 vm 这个变量名表示 Vue 实例,在实例化 Vue 时,需要传入一个选项对象,它可以包含数据(data).模板(template).挂载元素(el).方法(methods).生命周期钩子(lifecyclehook)等选项. Vue 实例化的选项 需要注意的

vue学习笔记（四）——Vue实例以及生命周期

1.构造器(实例化) var vm = new Vue({ //选项 |-------DOM |   |-------el (提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.) |   |-------template (一个字符串模板作为 Vue 实例的标识使用.模板将会 替换 挂载的元素.挂载元素的内容都将被忽略,除非模板的内容有分发 slot.) |   |-------render (字符串模板的代替方案,允许你发挥 JavaScript 最大的编程能力.) |---

Vue入门系列（五）Vue实例详解与生命周期

[入门系列] [本文转自] http://www.cnblogs.com/fly_dragon Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着.销毁等过程进行js控制. 5.1. Vue实例初始化的选项配置对象详解 前面我们已经用了很多次 new Vue({...})的代码,而且Vue初始化的选项都已经用了data.methods.el.comp

vue实例的生命周期

生命周期钩子(来自vue官方文档) 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos()).这是因为箭头函数绑定了父上下文,因此 this 与你期待的 Vue 实例不同,this.fetchTodos 的行为未定义. beforeCreate 类型:Function 详细: 在实例初始化之后,数据观测 (data observer)