实例详解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 相关文章推荐
JavaScript中的Window窗口对象
Jan 16 Javascript
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
javaScript call 函数的用法说明
Apr 09 Javascript
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
js对象基础实例分析
Jan 13 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
jquery.multiselect多选下拉框实现代码
Nov 11 Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 Javascript
微信小程序 登录的简单实现
Apr 19 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
微信小程序数据分析之自定义分析的实现
Aug 17 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 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
使用Discuz关键词服务器实现PHP中文分词
2014/03/11 PHP
php读取3389的脚本
2014/05/06 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
对textarea框的代码调试,而且功能上使用非常方便,酷
2006/06/30 Javascript
转一个日期输入控件,支持FF
2007/04/27 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
JQuery获取当前屏幕的高度宽度的实现代码
2011/07/12 Javascript
Mac/Windows下如何安装Node.js
2013/11/22 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
js光标定位文本框回车表单提交问题的解决方法
2015/05/11 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
在create-react-app中使用sass的方法示例
2018/10/01 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
[01:16:28]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第二场 2月23日
2021/03/11 DOTA
详解Python中的静态方法与类成员方法
2017/02/28 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
python版opencv摄像头人脸实时检测方法
2018/08/03 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
Python pymongo模块常用操作分析
2018/09/01 Python
python根据文章标题内容自动生成摘要的实例
2019/02/21 Python
django中瀑布流写法实例代码
2019/10/14 Python
春节到了 教你使用python来抢票回家
2020/01/06 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
python中time.ctime()实例用法
2021/02/03 Python
爱他美官方海外旗舰店:Aptamil奶粉
2017/12/22 全球购物
AT&T Wireless:手机、无限数据计划和配件
2018/06/03 全球购物
放飞梦想演讲稿
2014/05/05 职场文书
国家税务局干部作风整顿整改措施
2014/09/18 职场文书
初中班长竞选稿
2015/11/20 职场文书
Java字符缓冲流BufferedWriter
2022/04/09 Java/Android