实例详解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 相关文章推荐
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
kmock javascript 单元测试代码
Feb 06 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
JavaScript驾驭网页-CSS与DOM
Mar 24 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
Jun 25 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
Aug 01 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
May 30 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
初识laravel5
2015/03/02 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
js parentElement和offsetParent之间的区别
2010/03/23 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
Jquery中的层次选择器与find()的区别示例介绍
2014/02/20 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
js实现下一页页码效果
2017/03/07 Javascript
Vue.js如何优雅的进行form validation
2017/04/07 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
安装多版本Vue-CLI的实现方法
2020/03/24 Javascript
javascript递归函数定义和用法示例分析
2020/07/22 Javascript
vue npm install 安装某个指定的版本操作
2020/08/11 Javascript
[39:19]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第二场 11.26
2020/11/30 DOTA
Python实现扫描指定目录下的子目录及文件的方法
2014/07/16 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python中的rjust()方法使用详解
2015/05/19 Python
python简单读取大文件的方法
2016/07/01 Python
Python采用Django制作简易的知乎日报API
2016/08/03 Python
pandas dataframe添加表格框线输出的方法
2019/02/08 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
配置python的编程环境之Anaconda + VSCode的教程
2020/03/29 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
低碳环保标语
2014/06/12 职场文书
爱国口号
2014/06/19 职场文书
2014年转正工作总结
2014/11/08 职场文书
出纳工作检讨书范文
2014/12/27 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
《窃读记》教学反思
2016/02/18 职场文书