vue 访问根示例、ref操作dom

清疚 2021-07-24 18:13 385阅读 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 条评论，385人围观）

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

相关阅读

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

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

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

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

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

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

相关 vue js操作dom

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

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

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

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

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

相关 DOM访问和操作的优化方法

1、最小化DOM访问次数，尽可能在JavaScript端处理； 2、如果需要多次访问某个DOM节点，请使用局部变量存储它的引用； 3、小心处理HTML集

╰+哭是因爲堅強的太久メ/ 2022年06月05日 06:18/ 0 赞/ 129 阅读

相关 vue18-操作dom ref

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

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

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

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

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

相关 vue-ref-$refs用法

[vue $refs的基本用法][vue _refs] <div id="app"> <input type="text" ref="input1

梦里梦外;/ 2021年10月09日 03:36/ 0 赞/ 347 阅读

相关 react ref实现dom操作

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

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

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

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

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