Vue处理边界之$root、$parent、$refs
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的更多相关文章
- vue组件的那些事($children,$refs,$parent)的使用
如果项目很大,组件很多,怎么样才能准确的.快速的寻找到我们想要的组件了?? 1)$refs 首先你的给子组件做标记.demo :<firstchild ref="one"&g ...
- vue组件---边界处理情况
(1)访问元素&组件 ①访问根实例 在每个 new Vue 实例的子组件中,其根实例可以通过 $root 属性进行访问.例如,在这个根实例中: // Vue 根实例 new Vue({ dat ...
- 学习笔记:Vue——处理边界情况
访问元素&组件 01.访问根实例 $root // Vue 根实例 new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ...
- Vue父子组件传值$parent , ref,$refs,props大总结
子组件: <template> <div class="child"> <slot name='meiyong'></slot> & ...
- Vue $root、$parent、$refs
Vue处理边界parent.$refs 下面的功能都是有风险的,尽量避免使用 Vue 子组件可以通过 $root 属性访问父组件实例的属性和方法 <div id="app"& ...
- Vue.js中ref ($refs)用法举例总结
原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"> <input type=& ...
- vue问题整理
生命周期面试题 1.什么是 vue 生命周期 vue 实例从创建到销毁的过程就是生命周期. 也就是从开始创建.初始化数据.编译模板.挂在 dom -> 渲染.更新 -> 渲染.卸载等一系列 ...
- Vue入门学习
目录 Vue 简介 第一个Vue程序 Vue基本语法 双向绑定 组件 Axios异步通信 计算属性 Slot 自定义事件 第一个Vue-cli程序 webpack学习使用 Vue-Router路由 v ...
- Vue.js——60分钟组件快速入门(下篇)
概述 上一篇我们重点介绍了组件的创建.注册和使用,熟练这几个步骤将有助于深入组件的开发.另外,在子组件中定义props,可以让父组件的数据传递下来,这就好比子组件告诉父组件:"嘿,老哥,我开 ...
随机推荐
- 有关a++,++a的基础问题
今天跟朋友讨论java的赋值与自增问题 @Test public void test2() { int a = 5; int b = a++; System.out.println("a = ...
- MySQL的入门与使用,sqlyog对数据库,表和数据的管理
MySQL的入门 1.到mysql官网下载. 2.安装mysql软件(一定要放到英文路径下) 3.使用 验证是否成功 将mySQL的bin路径添加到系统环境变量Path中 打开dos命令窗口 Wind ...
- java arraylist int[] 转换
double no=Double.valueOf("str");int num4=(int)no;double no1=Double.parseDouble("str&q ...
- React报错 :browserHistory doesn't exist in react-router
由于版本问题,React中history不可用 import { hashHistory } from 'react-router' 首先应该导入react-router-dom包: import { ...
- 数据结构期末复习( はち)--VOA图关键路径求法
题目如下图: 注:将123456当成abcdef. 事件最早发生事件求法:找从原点到该事件的最长路径(从前往后推) 对a:Ve=0 对b:Ve=max{ 2 , 15+4 }=19 对c:Ve=15 ...
- Uva 派 (Pie,NWERC 2006,LA 3635)
依然是一道二分查找 #include<iostream> #include<cstdio> #include<cmath> using namespace std; ...
- 【Ecshop】修改处理用户购物车的行为
Ecshop v2.7.3的购物车处理方面在现在看来有比较反用户体验的设计: 用户未登录时加入购物车的商品,在用户登录后会被清空而不是加入到登录用户的购物车中: 用户登录后加入购物车的商品,在退出后会 ...
- MTCNN学习资源
MTCNN pytorch版本的实现 TropComplique/mtcnn-pytorch https://github.com/TropComplique/mtcnn-pytorch MTCNN实 ...
- 04vim的使用
linux常用命令 workon 查看已经安装的虚拟环境 deactivate 退出虚拟环境 whoami 查看用户 sudo bash install.sh 添加权限 pwd 查看在那个路径下 cd ...
- Python开发不可不知的虚拟环境
一.python3.3之后自带的venv模块 1. 创建虚拟环境 python3.6 -m venv project-env 2. 加入虚拟环境目录 cd pronject-env 3. 激活虚拟环境 ...