vue 之 ref

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="js/vue.js"></script>
</head>
 
<body>
  <div id="app">
    <!-- 引用DOM元素 -->
    <input type="text" value='获取元素' @click="getElement" ref="mybtn">
    <h3 id="myh3" ref="myh3"> 哈哈哈!!!!</h3>
    <!-- 引用组件 -->
    <login ref="mylogin"></login>
  </div>
  <script>
    var login = {
      template: '<h1>登陆组件</h1>',
      data() {
        return {
          msg: 'son msg'
        }
      },
      methods: {
        show() {
          console.log('调用了子组件的方法');
        }
      }
    }
 
    //创建Vue实例,得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {
        getElement() {
          //vue不建议操作DOM
          // console.log(document.getElementById('myh3').innerText);   //哈哈哈!!!!
          //ref  -->reference   引用
          console.log(this.$refs.myh3.innerText); //哈哈哈!!!!
          console.log(this.$refs.mylogin.msg);   //'son msg'this.$refs.mylogin.show(); //调用了子组件的方法 } }, components: { login } }); </script> </body> </html>

  

posted @   一只小菜鸟呀!  阅读(253)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· SQL Server统计信息更新会被阻塞或引起会话阻塞吗?
阅读排行:
· 传国玉玺易主,ai.com竟然跳转到国产AI
· 自己如何在本地电脑从零搭建DeepSeek!手把手教学,快来看看! (建议收藏)
· 本地部署 DeepSeek:小白也能轻松搞定!
· 我们是如何解决abp身上的几个痛点
· 普通人也能轻松掌握的20个DeepSeek高频提示词(2025版)
点击右上角即可分享
微信分享提示