实例详解vue中的$root和$parent


Posted in Javascript onApril 29, 2019

$root

vue状态管理使用vuex,如果项目不大,逻辑不多,name我们没必要用vuex给项目增加难度,只需要用$root设置vue实例的data就行了,如下

main.js

new Vue({
 data(){
  return{
   loading:true
  }
 },
 router,
 store,
 render: h => h(App)
}).$mount('#app')

a.vue

created(){
console.log(this.$root.loading) //获取loading的值
}

b.vue

created(){
this.$root.loading = false; //设置loading的属性
}

$parent

parent能够访问父组件的属性和方法

parent.vue

<template>
  <div>
    <child>
    </child>
  </div>
</template>
<script> 
  import child from './child';
  export default {
    components:{
      child 
    },
    data(){
      return {
        text:"测试"
      }
    },
  }
</script>

child.vue

<template>
  <div>
    <child>
    </child>
  </div>
</template>
<script> 
  import child from './child';
  export default {
    created(){
    console.log(this.$parent.text)//测试(能够获取到父组件的属性和方法)
   }
  }
</script>

$refs

总结

以上所述是小编给大家介绍的vue中的$root,$parent,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
Sep 05 Javascript
jquery如何通过name名称获取当前name的value值
Dec 20 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
简化版手机端照片预览组件
Apr 13 Javascript
JavaScript中splice与slice的区别
May 09 Javascript
Avalonjs双向数据绑定与监听的实例代码
Jun 23 Javascript
Element-ui table中过滤条件变更表格内容的方法
Mar 02 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
jQuery位置选择器用法实例分析
Jun 28 jQuery
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
微信网页登录逻辑与实现方法
Apr 29 #Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 #Javascript
Vue 引入AMap高德地图的实现代码
Apr 29 #Javascript
微信小程序--获取用户地理位置名称(无须用户授权)的方法
Apr 29 #Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
Apr 29 #Javascript
微信小程序-form表单提交代码实例
Apr 29 #Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 #Javascript
You might like
对Session和Cookie的区分与解释
2007/03/16 PHP
php 过滤器实现代码
2010/08/09 PHP
php的chr和ord函数实现字符加减乘除运算实现代码
2011/12/05 PHP
PHP Session机制简介及用法
2014/08/19 PHP
PHP实现对站点内容外部链接的过滤方法
2014/09/10 PHP
学习php设计模式 php实现单例模式(singleton)
2015/12/07 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
Laravel 框架控制器 Controller原理与用法实例分析
2020/04/14 PHP
JQuery 小练习(实例代码)
2009/08/07 Javascript
jQuery实现简单的列表式导航菜单效果代码
2015/08/31 Javascript
相册展示PhotoSwipe.js插件实现
2016/08/25 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
vue路由拦截器和请求拦截器知识点总结
2019/11/08 Javascript
小程序分享链接onShareAppMessage的具体用法
2020/05/22 Javascript
基于python的汉字转GBK码实现代码
2012/02/19 Python
Python类的专用方法实例分析
2015/01/09 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Python完全识别验证码自动登录实例详解
2019/11/24 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
Python彻底删除文件夹及其子文件方式
2019/12/23 Python
Python高阶函数、常用内置函数用法实例分析
2019/12/26 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
Tuckernuck官网:经典的美国品质服装、鞋子和配饰
2021/01/11 全球购物
幼儿园园长岗位职责
2013/11/26 职场文书
大学校运会广播稿
2014/02/03 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
婚前财产协议书范本
2014/10/19 职场文书
先进工作者个人总结
2015/02/15 职场文书
投标售后服务承诺书
2015/04/29 职场文书
工作简报格式范文
2015/07/21 职场文书