Vue(基础五)_vue中用ref和给dom添加事件的特殊情况

最新推荐文章于 2024-05-26 03:38:41 发布

weixin_30443075

最新推荐文章于 2024-05-26 03:38:41 发布

阅读量1.7k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xxm980617/p/10625458.html

版权

一、前言

这篇文章涉及的主要内容有：

1、ref绑定在标签上是获取DOM对象

2、ref绑定在子组件上获取的是子组件对象

3、案列：自动获取input焦点

二、主要内容

1、基础内容：

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

（1）将ref绑定到标签上：测试之后发现在mounted()函数之后拿到的是button对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id='app'></div>
    <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
    <script>
        var App = {
            template:`
            <div class='app'>
              <button ref='btn'>我是按钮1</button>
            <