vue1.0的v-el(获得dom对象) 和v-ref（获得组件对象）

最新推荐文章于 2024-06-15 13:26:04 发布
最新推荐文章于 2024-06-15 13:26:04 发布
阅读量4.5k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42124866/article/details/81119658
版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue1.js"></script>
    <!--<script src="vue-resource.js"></script>-->
</head>
<body>
    <div id="app">
        <button @click="getdom">获取dom对象</button>
        <div v-el:mydiv id="div1">div1内容</div>
        <button @click="getcom">获取组件对象</button>
        <login v-ref:mydom >组件内容</login>
    </div>
</body>
    <script>
            new Vue({
                el:'#app',
                methods:{
                    getdom:function(){
                       //获取id=div1的对象(的内容)有两种方式可以完成
                        //传统的方法
                        console.log(document.getElementById("div1").innerHTML);
                        //vuejs的写法
                        console.log(this.$els.mydiv.innerHTML);
                    },
                    getcom:function(){
                        //获取组件对象
                        console.log(this.$refs.mydom);
                        //获得组件数据内容
                        console.log(this.$refs.mydom.subname);


                    }
                },
                components:{
                    'login':{
                        data:function(){
                            return{
                              subname:'子组件名字'
                            }
                        },
                        template:'<h2>这是子组件</h2>'
                    }
                }


            });
    </script>
</html>

shmaymay
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的ref的基本使用，组件使用与操作
weixin_49088708的博客
06-27 2325
ref的使用
Vue $refs操作 DOM实现组件传值
01-20
总结来说，$refs是Vue提供的一种访问DOM元素和子组件实例的机制，虽然方便，但应当尽量避免直接操作DOM，而是倾向于使用Vue提供的声明式数据绑定和组件通信方式。在必须使用$refs的情况下，应注意保持代码的可读性...
Vue this.$refs的使用
xwnxwn的专栏
07-10 1366
https://blog.csdn.net/qq_37767455/article/details/102485242
Vue教程13(ref 和 $refs)
yangsen159的博客
04-14 243
ref和$refs的使用 ref ref 被用来给元素或子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在普通的DOM元素上使用，引用指向的就是 DOM 元素，如果是在子组件上，引用就指向组件的实例。 $refs $refs 是一个对象，持有已注册过 ref 的所有的子组件。 ref使用 我们通过 ref 属性 获取值 <h3 id="myh3" ref="myh...
【Vue】获取dom对象或者组件实例
最新发布
qq_39921135的博客
06-15 186
概念：通过 ref标识 获取真实的 dom对象或者组件实例对象模版引用的时机：组件挂载完毕。
vue中的ref
m0_67388537的博客
07-24 3026
2.遍历的元素,先定义一个空数组,定一个函数获取元素,返回给模板使用,通过ref绑定这个函数。1.单个元素:先声明ref响应式数据,返回给魔板使用,通过ref绑定数据。
vue 3 day(1)
初心魏的博客
11-19 887
@[TOC](vue 3 day(1)) 一、基本语法 1.1 变量的定义 定义变量 export default { data() { return { name: "jack", name1:"rose", name2:"lili" } }, } 使用变量 <div class="about" id="about"> <h1>This is an about page</h1>
在vue中使用el-tab-pane v-show/v-if无效的解决
10-15
在Vue.js中，`el-tab-pane` 是 Element UI 框架中的一个组件，用于创建选项卡式布局。然而，在实际开发过程中，开发者可能会遇到使用 `v-show` 或 `v-if` 控制 `el-tab-pane` 显示与隐藏时不起作用的问题。这通常是...
vue 实现v-for循环回来的数据动态绑定id
10-16
在Vue.js中，`v-for`指令用于遍历数组或对象，从而在DOM中渲染多个元素。本篇文章将深入探讨如何在使用`v-for`循环时动态地为每个元素绑定唯一的ID，这对于创建可交互的组件和跟踪元素状态至关重要。 首先，让我们...
在Vue中使用ref获取dom元素节点及组件内的数据和方法
01-20
本文将详细讲解如何在Vue中使用`ref`来获取DOM元素节点以及组件内的数据和方法。 ### 一、获取DOM元素节点 在HTML模板中，给需要引用的DOM元素添加`ref`属性，如： ```html <div ref="mytitle">This is title ...
vue 使用ref 让父组件调用子组件的方法
08-28
在 Vue.js 中，Ref 是一个特殊的属性，可以用来访问组件实例或 DOM 元素。当我们使用 Ref 时，Vue.js 会将该元素或组件实例赋值给该 Ref，从而允许我们访问和操作该元素或组件实例。 使用 Ref 让父组件调用子组件的...
Vue中$refs 使用详解
wjw_de_java的博客
10-09 1380
vue $refs
ref的使用
weixin_43933771的博客
09-10 305
ref的使用 在react的开发模式中，通常情况下不需要、也不建议直接操作DOM；但是某些特殊的情况，确实需要获取到DOM进行某些操作，如何通过创建ref来获取对应的DOM元素呢？目前有三种方式(首先需要说明的是，在这里既然有了ref，就不会再通过document的方式去直接操作DOM了) import React, { PureComponent, createRef, Component } from 'react'; class Counter extends PureComponent { c
Vue中ref属性的用法
yangaoyuan1999的博客
12-14 1202
$refs属性： 1.通过$refs属性获取到的对象是一个原生的DOM对象 2.,Vue不提倡DOM操作 3. ref属性可以用在标签上也可以用在组件上,获取组件的dom对象 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
Vuejs获取节点的value和innerHTML
热门推荐
caochenyu的博客
04-21 1万+
{{ message }} console.log(_this.$refs.message.innerHTML); console.log(_this.$refs.message_value.value);
Vue2.0开发之——ref引用实例-文本框和按钮的按需展示(42)
我的博客
02-28 615
文本框和按钮按需展示功能实现了解this.$nextTick的应用场景updated为啥不行more。
ref绑定、class、value值、列表渲染、dangerouslySetInnerHTML
congboer的博客
08-16 704
1、一般针对输入框： 推荐用第二种 <input type = "text" ref = "inp"/> 通过this.refs.inp可以访问这个input框 即：this.refs.inp.value就是input框里面的内容 <input type = "text" ref = { el => this.inp = el }/> 通过el就会少一层，el代表的...
关于innerHTML的用法,以及数据覆盖问题
m0_46642164的博客
02-21 3731
JavaScript innerHTML使用及数据覆盖问题的解决
vue3 ref属性
greed
09-10 3288
vue3 ref属性 操作单个DOM元素 操作单个DOM或者组件的流程 定义一个响应式变量 把变量返回给模板使用 模板中绑定上述返回的数据 可以通过info变量操作DOM或者组件实例 <template> <div> <div>ref操作DOM和组件</div> <hr> <!-- 3、模板中绑定上述返回的数据 --> <div ref='info'>hello</div&g
vue3不用v-for获取多个同名ref dom元素
05-31
在 Vue3 中，可以使用 `ref` 的新特性来获取多个同名的 DOM 元素。具体做法是：在 `ref` 中使用一个函数，并将函数的参数设置为一个数组，然后在函数中使用 `map` 方法将每个元素的 `ref` 存储到一个数组中。 例如，如果要获取多个同名的 `input` 元素，可以这样做： ``` <template> <div> <input v-for="(item, index) in items" :key="index" :ref="setInputRefs" /> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const inputRefs = ref([]); const setInputRefs = (el) => { if (el) { inputRefs.value.push(el); } }; // 现在你可以在 inputRefs 中访问所有的 input 元素的 ref 了 console.log(inputRefs.value); return { setInputRefs, inputRefs, items: [1, 2, 3], }; }, }; </script> ``` 这里我们定义了一个 `inputRefs` 的 `ref`，并在 `setInputRefs` 函数中将每个 `input` 元素的 `ref` 存储到 `inputRefs` 中。最后，我们就可以在 `inputRefs` 中访问所有的 `input` 元素的 `ref` 了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值