Vue处理边界之parent、$refs

下面的功能都是有风险的,尽量避免使用

1.Vue 子组件可以通过 $root 属性访问父组件实例的属性和方法

<div id="app">
<root-obj></root-obj>
</div>
Vue.component('root-obj', {
data() {
return { }
},
template: `<div>
<button @click='getRoot'>$Root</button>
</div>`,
methods: {
getRoot() {
console.log(this)
console.log(this.$root)
}
}
})
var app = new Vue({
el: '#app',
data: {
msg: 'Root'
}
})

2.parent 的区别

parent 都能够实现访问父组件的属性和方法,两者的区别在于,如果存在多级子组件,通过root 访问得到的是根父组件

<div id="app">
<root-obj></root-obj>
</div>
Vue.component('root-obj', {
data() {
return { }
},
template: `<div>
<button @click='getRoot'>子组件</button>
<child-component></child-component>
</div>`,
methods: {
getRoot() {
console.log(this)
console.log(this.$root)
console.log(this.$parent)
}
}
})
Vue.component('child-component', {
data() {
return { }
},
template: `<div>
<button @click='getRoot'>子子组件</button>
</div>`,
methods: {
getRoot() {
console.log(this)
console.log(this.$root)
console.log(this.$parent)
}
}
})
var app = new Vue({
el: '#app',
data: {
msg: 'Root'
}
})

3.$refs 访问子组件实例

通过在子组件标签定义 ref 属性,在父组件中可以使用$refs 访问子组件实例

<button @click='refView'>通过ref访问子组件</button>
Vue.component('base-input', {
data() {
return {
msg: 'base-input'
}
},
template: `<input type='text'/>`
})
var app = new Vue({
el: '#app',
data: {
msg: 'Root'
},
methods: {
refView() {
console.log(this.$refs.baseInput)
this.$refs.baseInput.$el.focus()
}
}
})

原文:https://www.jianshu.com/p/2993c2cd6d68  

Vue处理边界之$root、$parent、$refs的更多相关文章

  1. vue组件的那些事($children,$refs,$parent)的使用

    如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"&g ...

  2. vue组件---边界处理情况

    (1)访问元素&组件 ①访问根实例 在每个 new Vue 实例的子组件中,其根实例可以通过 $root 属性进行访问.例如,在这个根实例中: // Vue 根实例 new Vue({ dat ...

  3. 学习笔记:Vue——处理边界情况

    访问元素&组件 01.访问根实例 $root // Vue 根实例 new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ...

  4. Vue父子组件传值$parent , ref,$refs,props大总结

    子组件: <template> <div class="child"> <slot name='meiyong'></slot> & ...

  5. Vue $root、$parent、$refs

    Vue处理边界parent.$refs 下面的功能都是有风险的,尽量避免使用 Vue 子组件可以通过 $root 属性访问父组件实例的属性和方法 <div id="app"& ...

  6. Vue.js中ref ($refs)用法举例总结

    原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"> <input type=& ...

  7. vue问题整理

    生命周期面试题 1.什么是 vue 生命周期 vue 实例从创建到销毁的过程就是生命周期. 也就是从开始创建.初始化数据.编译模板.挂在 dom -> 渲染.更新 -> 渲染.卸载等一系列 ...

  8. Vue入门学习

    目录 Vue 简介 第一个Vue程序 Vue基本语法 双向绑定 组件 Axios异步通信 计算属性 Slot 自定义事件 第一个Vue-cli程序 webpack学习使用 Vue-Router路由 v ...

  9. Vue.js——60分钟组件快速入门(下篇)

    概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...

随机推荐

  1. 有关a++,++a的基础问题

    今天跟朋友讨论java的赋值与自增问题 @Test public void test2() { int a = 5; int b = a++; System.out.println("a = ...

  2. MySQL的入门与使用,sqlyog对数据库,表和数据的管理

    MySQL的入门 1.到mysql官网下载. 2.安装mysql软件(一定要放到英文路径下) 3.使用 验证是否成功 将mySQL的bin路径添加到系统环境变量Path中 打开dos命令窗口 Wind ...

  3. java arraylist int[] 转换

    double no=Double.valueOf("str");int num4=(int)no;double no1=Double.parseDouble("str&q ...

  4. React报错 :browserHistory doesn't exist in react-router

    由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...

  5. 数据结构期末复习( はち)--VOA图关键路径求法

    题目如下图: 注:将123456当成abcdef. 事件最早发生事件求法:找从原点到该事件的最长路径(从前往后推) 对a:Ve=0 对b:Ve=max{ 2 , 15+4 }=19 对c:Ve=15 ...

  6. Uva 派 (Pie,NWERC 2006,LA 3635)

    依然是一道二分查找 #include<iostream> #include<cstdio> #include<cmath> using namespace std; ...

  7. 【Ecshop】修改处理用户购物车的行为

    Ecshop v2.7.3的购物车处理方面在现在看来有比较反用户体验的设计: 用户未登录时加入购物车的商品,在用户登录后会被清空而不是加入到登录用户的购物车中: 用户登录后加入购物车的商品,在退出后会 ...

  8. MTCNN学习资源

    MTCNN pytorch版本的实现 TropComplique/mtcnn-pytorch https://github.com/TropComplique/mtcnn-pytorch MTCNN实 ...

  9. 04vim的使用

    linux常用命令 workon 查看已经安装的虚拟环境 deactivate 退出虚拟环境 whoami 查看用户 sudo bash install.sh 添加权限 pwd 查看在那个路径下 cd ...

  10. Python开发不可不知的虚拟环境

    一.python3.3之后自带的venv模块 1. 创建虚拟环境 python3.6 -m venv project-env 2. 加入虚拟环境目录 cd pronject-env 3. 激活虚拟环境 ...