处理边界情况之使用$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. 《HALCON数字图像处理》第五章笔记

    目录 第五章 图像运算 图像的代数运算 加法运算 图像减法 图像乘法 图像除法 图像逻辑运算(位操作) 图像的几何变换 图像几何变换的一般表达式 仿射变换 投影变换 灰度插值 图像校正 我在Gitee ...

  2. Docker容器固定ip

    Docker容器固定IP 必须停止docker服务才能创建网桥 查看docker服务状态 停止docker服务 启动docker服务 [root@docker Tools]# systemctl st ...

  3. Java常用类-包装类

    包装类 ​ Java中的基本类型功能简单,不具备对象的特性,为了使基本类型具备对象的特性,所以出现了包装类,就可以像操作对象一样操作基本类型数据;包装类不是为了取代基本数据类型,而是在数据类型需要使用 ...

  4. php公立转农历

    <?php function nongli($riqi) { //优化修改 20160807 FXL $nian=date('Y',strtotime($riqi)); $yue=date('m ...

  5. 使用nodejs的wxmnode模块,开发一个微信自动监控提醒功能,做个天气预报。

    这个模块是一个公众号的模块,名字叫"帮你看着". 原本这个公众号是做股票监控提醒的,我也没炒股.因为接口支持写入任何内容,所以可以有其他的用处.比如做成天气预报定时提醒. 我们去n ...

  6. BUUCTF-九连环

    九连环 这题还是稍微有点难度的 使用16进制打开发现压缩包,用binwalk分离看看 分离得到的压缩包同样16进制看看 可以发现多个压缩包,这种情况应该是伪加密的方式,但是直接使用修复压缩包的方式没法 ...

  7. OpenAPI 3.0 规范-食用指南

    概述 OpenAPI 3.0 规范由 8 个根对象组成: openapi info servers paths components security tags externalDocs OpenAP ...

  8. JQuery select与radio的取值与赋值

    radio 取:$("input[name='NAME']:checked").val(); 赋:$("input[name='NAME'][value='指定值']&q ...

  9. colab运行.py文件

    !python split_data.py

  10. # vue3 ref 和 reactive 函数

    vue3 ref 和 reactive 函数 前言 上一篇博文介绍 setup 函数的时候,最后出现一个问题,就是在 setup 函数中,编写一个事件,直接去修改定义的变量,发现页面上没有更新成功,并 ...