处理边界情况之使用$root访问根实例

点击打开视频教程

在每个 new Vue 实例的子组件中,其根实例可以通过 $root property 进行访问。

例如,在这个根实例中:

src\main.js

import Vue from 'vue'
import App from './App.vue'
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css'; // import {Plugin1,Plugin2} from './plugins/plugins.js' Vue.config.productionTip = false //使用ElementUI
Vue.use(ElementUI) // Vue.use(Plugin1,'参数1') // Vue.use(Plugin2,'参数2') new Vue({ data: {
foo: 1
},
computed: {
bar: function () {
return '满天星辰不及你'
}
},
methods: {
baz: function () {
return '满天星辰不及你吖'
}
}, render: h => h(App),
}).$mount('#app')

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。

<template>
<div id="app">
<!-- 获取根组件的数据 -->
{{ $root.foo }}
<!-- 访问根组件的计算属性 -->
{{ $root.bar }}
<button @click="change">改变</button>
</div>
</template> <script>
export default {
name: 'App',
data(){
return { }
},
mounted(){ },
computed:{ },
methods:{
// 写入根组件的数据
change(){
this.$root.foo = '末晨曦吖' // 调用根组件的方法
let name = this.$root.baz()
console.log(name);
}
}
}
</script> <style scoped> </style>

注意:对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不然了。因此在绝大多数情况下,我们强烈推荐使用 Vuex 来管理应用的状态。

048_末晨曦Vue技术_处理边界情况之使用$root访问根实例的更多相关文章

  1. 056_末晨曦Vue技术_处理边界情况之X-template

    处理边界情况之X-template 点击打开视频讲解更加详细 另一个定义模板的方式是在一个<script>元素中,并为其带上 text/x-template 的类型,然后通过一个 id 将 ...

  2. 051_末晨曦Vue技术_处理边界情况之provide和inject依赖注入

    provide和inject依赖注入 点击打开视频讲解更详细 在此之前,在我们描述访问父级组件实例的时候,展示过一个类似这样的例子: <google-map> <google-map ...

  3. 057_末晨曦Vue技术_处理边界情况之强制更新($forceUpdate)与通过 v-once 创建低开销的静态组件

    强制更新($forceUpdate) 点击打开视频讲解更加详细 在vue中,如果data中有基本数据类型变量:age,修改他,页面会自动更新. 但如果data中的变量为数组或对象(引用数据类型),我们 ...

  4. 054_末晨曦Vue技术_处理边界情况之组件之间的循环引用

    组件之间的循环引用 点击打开视频讲解更详细 假设你需要构建一个文件目录树,像访达或资源管理器那样的.你可能有一个 <tree-folder> 组件,模板是这样的: <p> &l ...

  5. 057_末晨曦Vue技术_处理边界情况之强制更新和创建低开销的静态组件

    强制更新和创建低开销的静态组件 点击打开视频讲解更加详细 强制更新 如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 你可能还没有留意到数组或对象的变更检 ...

  6. 052_末晨曦Vue技术_处理边界情况之程序化的事件侦听器

    程序化的事件侦听器 点击打开视频讲解更详细 现在,你已经知道了 $emit 的用法,它可以被 v-on 侦听,但是 Vue 实例同时在其事件接口中提供了其它的方法.我们可以: 通过 $on(event ...

  7. 066_末晨曦Vue技术_过渡 & 动画之多个元素的过渡

    多个元素的过渡 点击打开视频讲解更加详细 我们之后讨论多个组件的过渡,对于原生标签可以使用 v-if/v-else.最常见的多标签过渡是一个列表和描述这个列表为空消息的元素: <transiti ...

  8. 058_末晨曦Vue技术_过渡 & 动画之过渡的类名

    进入/离开 & 列表过渡 点击打开视频讲解更加详细 概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class ...

  9. vue深入了解组件——处理边界情况

    一.访问元素&组件 在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作DOM元素.不过也确实在一些情况下做这些事情是合适的. 1.1 访问根实例 在每个 new Vue 实例的子组 ...

随机推荐

  1. [学习笔记] pd_ds黑科技

    https://www.cnblogs.com/jiqimin/p/11226809.html 丢个链接,跑路 // Author: wlzhouzhuan #pragma GCC optimize( ...

  2. JAVA - 序列化的方式

    JAVA - 序列化的方式 序列化 (Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程.在序列化期间,对象将其当前状态写入到临时或持久性存储区.以后,可以通过从存储区中读 ...

  3. 1. Docker的中央仓库安装设置及镜像的操作

    具体也可参考:https://developer.aliyun.com/mirror/docker-ce?spm=a2c6h.13651102.0.0.3e221b11G7cfhr https://d ...

  4. c++ 乘法逆元

    主要参考:OI-WIKI 为什么要逆元 当一个题目让你求方案数时常要取余,虽然 \((a+b)\% p=(a\% p+b\% p)\%p\) \((a-b)\% p=(a\% p-b\% p)\%p\ ...

  5. Jenkins之配置GitHub-Webhook

    前提条件1: 运行Jenkins的机器需要安装git,并且git.exe文件在系统的环境变量里面,或者手动在 Manage Jenkins -> Global Tool Configuratio ...

  6. Python基础学习_03

    程序的流程控制 1.程序的组织结构 (1)顺序结构 (2)选择结构 (3)循环结构 2.对象的布尔值 以下对象的布尔值为False False,数值0,None,空字符串,空列表,空元组,空字典,空集 ...

  7. Vue是怎么渲染template内的标签内容的?

    我们在使用Vue做项目时,都会用到脚手架,相应的我们会在template写标签内容.那么你知道为什么会在template写标签吗?这当中经过了怎样的处理呢? <template> < ...

  8. js 表面学习 - 认识函数

    JavaScript 函数语法 JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 (). 函数名可包含字母.数字.下划线和美元符号(规则与变量名相同). 圆括号可包 ...

  9. UiPath官网认证中文教程

    RPA之家公众号:RPA之家 RPA之家官网:http://rpazj.com 斗鱼直播:http://www.douyu.com/rpazj UiPath中文社区QQ群:465630324 RPA& ...

  10. Linux远程连接工具和运行级别

    常用的Linux远程连接工具: xshell MobaXterm windows的命令行工具 Linux的运行级别 linux有七个运行级别 0----所有的服务都不开启,代表的式关机 1---代表的 ...