Vue this.$refs的作用
Vue 作用 this Refs
2023-09-14 09:14:52 时间
案例一、ref 写在标签上时
<!-- ref 写在标签上时:this.$refs.名字 获取的是标签对应的dom元素
ref 写在组件上时:这时候获取到的是 子组件(比如counter)的引用-->
<div id="root">
<!-- ref = 'hello': 给div 起了一个引用的名字 hello -->
<div
ref = 'hello'
@click = "handleClick">
laugh yourself
</div>
</div>
<script>
var vm = new Vue({
el: '#root',
methods: {
handleClick: function() {
//this.$refs : 获取整个Vue实例中所有的引用 然后再找到hello这个引用 指向div那个dom节点
//console.log(this.$refs.hello)
alert(this.$refs.hello.innerHTML)
}
}
})
</script>
案例二、 ref 写在组件上时
计数:
<!-- ref 写在标签上时:this.$refs.名字 获取的是标签对应的dom元素
ref 写在组件上时:这时候获取到的是 子组件(比如counter)的引用-->
<div id="root">
<!-- 子组件触发了事件 这里父组件(模板区里面)监听该事件 调用handleChange方法
因此handleChange方法定义在父组件的methods里面-->
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div>
<script>
Vue.component('counter', {
template: '<div @click="handleClick"> {{number}} </div>',
data: function() {
return {
number: 0
}
},
methods: {
handleClick: function() {
this.number ++
//子组件向父组件传值 子组件被点击的时候 number+1 同时告诉外面 也即是触发一个事件
this.$emit('change')
}
},
})
var vm = new Vue({
el: '#root',
data: {
total: 0
},
methods: {
handleChange: function() {
//在此方法中计算两个数量的和 通过this.$refs.引用名字 获取两个子组件的引用
this.total = this.$refs.one.number +
this.$refs.two.number
}
}
})
</script>
相关文章
- Vue专题 05_详解vue生命周期的每个节点
- vue 子组件调用父组件方法传参,父组件调用也传参_面试题vue组件封装思路
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- vue中特殊的prop和事件
- vue前端怎么导出图片_VUE中将页面导出为图片或者PDF
- JS之在Vue对象内部获取vue对象的索引(箭头函数的闭包导致this代表的是函数本身)「建议收藏」
- vue-router传递参数的几种方式
- 解决:VUE同一路由强制刷新页面
- vue-cli 初始----安装运行Vue项目
- vscode设置vue模板_vscode怎么创建vue项目
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- vue项目引入外部原生js文件_php引入文件的四个方法
- vue3 报错解决:找不到模块‘xxx.vue’或其相应的类型声明。(Vue 3 can not find module)
- Vue全家桶介绍_vue全家桶有什么好处
- 新手友好|带你了解Vue小程序开发
- Vue中的生命周期的钩子函数有那些
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- 保证你不知道的Vue 3技巧
- vue是如何获取元素节点 ?
- 开心档-软件开发入门之Vue.js Ajax(vue-resource)
- Vue技术实现访问远程Redis的精彩之旅(vue访问远端redis)
- Vue抢跑Redis速度感受实时重磅数据(vue获取redis)
- Vue中触发Redis订阅通知(vue中订阅redis)
- Vue搭配Redis做针对性取值(vue redis取值)
- Oracle Vue网站助力网站创新,让你的网站飞起来(oracle vue网站)
- Oracle与Vue官网联合宣传前瞻技术,轻松开发(oracle vue官网)