vue 访问根示例、ref操作dom

清疚 2021-07-24 18:13 448阅读 0赞

访问根示例
    	1、在main.js中,与components同级,添加data属性
    		data:{键值对}
    
    	2、则在App.vue中导入过的所有子组件都能访问
    		一般在computed计算属性中
    		computed:{
    			函数中{
    				this.$root.键名获取
    			}
    		}
    		
    ref:
    	ref只会在组件渲染完成之后生效,并且它们不是响应式的.这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问$refs
    	
    	1、在元素标签上
    		方式一:ref='xx'
    		
    		方式二:动态绑定时,可以将ref定义为回调函数
    			<child-component :ref="(el) => child = el"></child-component>
    		
    	2、在函数中
    		this.$refs.xx.js操作方式
    			如:this.$refs.pp.innerHTML='我被修改了
    			
    组件使用ref
    	使用方式和标签一样,通过this.$ref.xx.$el获取到组件内部所有dom元素
    	this.$ref.xx.属性/方法名,能访问到组件内部的属性和方法

代码示例:  
**main.js:**

import Vue from 'vue'
    import App from './App'
    
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({ 
      el: '#app',
      data:{ foo:'hello foo'},
      components: {  App },
      template: '<App/>'
    })

**子组件:**

<template>
    	<div>
    		组件C
    		<p ref='pp'>dom</p>
    		{ { get}}
    	</div>
    
    </template>
    
    <script>
    export default{ 
    	name:'c',
    	data()
    	{ 
    		return{ 
    
    		}
    	},
    	//声明周期函数,相当于componentDidMount
    	mounted()
    	{ 
    		this.$refs.pp.innerHTML='我被改了'
    	},
    	computed:{ 
    		get()
    		{ 
    			return this.$root.foo;
    		}
    	}
    }
    </script>
    
    <style lang='css'>
    </style>

发表评论取消回复

表情：

评论列表（有 0 条评论，448人围观）

还没有评论，来说两句吧...

相关阅读

相关使用ref和$refs获取dom和组件

目录获取dom： 1：目标标签-添加ref属性 2：恰当时机，通过this.$refs.xxx，获取目标标签获取组件： 1：目标组件-添加ref属性 2：通过t

女爷i/ 2024年02月05日 14:47/ 0 赞/ 27 阅读

相关 VUE_vue如何操作dom

1.标签添加ref name可以随便定义 <div ref="name">vue操作dom</div> 2.获取元素获取ref值为name的元素

叁歲伎倆/ 2023年02月22日 12:22/ 0 赞/ 10 阅读

相关 Vue中ref和$refs的介绍以及使用方法示例

一、在JavaScript中需要通过document.querySelector("\demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom

本是古典何须时尚/ 2023年01月18日 02:25/ 0 赞/ 163 阅读

相关 Vue.js中$refs{}获取DOM元素

如果我们想获取DOM元素，一般使用js中的`document.querySelector`来获取这个dom节点，然后在获取元素的值，现在Vue提供给我们一种更便捷的方式来获取D

以你之姓@/ 2022年12月22日 10:00/ 0 赞/ 327 阅读

相关 vue js操作dom

先回顾下原生js和jquery操作dom：一、原生js操作dom：（1）通过id获取： var div1 = document.getElementById(

桃扇骨/ 2022年12月07日 01:22/ 0 赞/ 221 阅读

相关 vue中的ref作用，可以实现DOM的联动操作

![Center][] 其实官网已经讲的很仔细了，只是我个人可能接受能力比较差，并没有立刻明白他的意思。不过使用之后就很明白了。这里主要举个例子来说明： ![Cent

朴灿烈づ我的快乐病毒、/ 2022年06月10日 13:49/ 0 赞/ 181 阅读

相关 vue18-操作dom ref

首先看下面代码： <!DOCTYPE html> <html lang=en> <head> <meta charse

た入场券/ 2022年05月10日 01:44/ 0 赞/ 181 阅读

相关 vue中使用ref获取dom对象

（1）在标签上绑定一个ref属性，该属性可以获得该标签的dom对象 <div id="app"> <div ref="hi" @click="

冷不防/ 2022年04月16日 00:06/ 0 赞/ 449 阅读

相关 react ref实现dom操作

ref两种写法添加ref后,将使用js的方式来操作标签第一种: (1)在构造函数中声明 this.

柔光的暖阳◎/ 2021年07月25日 02:35/ 0 赞/ 470 阅读

相关 vue 访问根示例、ref操作dom

访问根示例 1、在main.js中,与components同级,添加data属性 data:{键值对} 2、则在App.vue

清疚/ 2021年07月24日 18:13/ 0 赞/ 449 阅读