美文网首页
19.ref获取DOM元素和组件

19.ref获取DOM元素和组件

作者: 前端无聊 | 来源:发表于2019-08-13 18:37 被阅读0次

1.ref获取vue中的DOM元素和组件:

<body>
  <div id="app">
    <input type="button" value="获取元素" @click="getElement" ref="mybtn">

    <h3 id="myh3" ref="myh3">哈哈哈, 今天天气太好了!!!</h3>

    <hr>

    <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() {
          // console.log(document.getElementById('myh3').innerText)

          //  ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError
          // console.log(this.$refs.myh3.innerText)

          // console.log(this.$refs.mylogin.msg)
          // this.$refs.mylogin.show()
        }
      },
      components: {
        login
      }
    });
  </script>
</body>

相关文章

  • 19.ref获取DOM元素和组件

    1.ref获取vue中的DOM元素和组件:

  • Vue 组件

    全局组件引入 局部组件引入 ref获取dom节点、获取组件引用 ref在html元素获取的是dom节点ref在组件...

  • Vue之ref的使用

    1.基本用法,本页获取Dom元素节点 ref除了可以获取本页面的dom元素,还可以拿到 子组件中 的data 和 ...

  • useRef、useImperativeHandle

    useRef可以直接获取dom元素 useRef结合useImperativeHandle可以通过父组件获取子组件...

  • 15Angular templateRef和NgTemplate

    templateRef ViewChild 获取当前组件模板中的元素(组件、ng-template、dom){st...

  • angular6入门笔记

    1.0创建项目 1.1 ngFor循环和事件 1.2获取dom元素 1.3 ngIf 1.4父组件给子组件传递数据...

  • 02-JQuery操作DOM

    一、JS获取DOM元素和JQuery获取DOM元素的区别 JavaScript获取的是DOM对象,而Jquery获...

  • vue中ref的作用

    基本用法 1 本页面获取dom元素 2 获取子组件中的data子组件 父组件 3 调用子组件中的方法子组件 父组件...

  • Angular 4 事件冒泡

    Angular 组件和 DOM 元素通过事件与外部进行通信, Angular 事件绑定语法对于组件和 DOM 元素...

  • 使用ref获取DOM元素和组件

    一、获取DOM元素虽然可以通过原生js操作获取到DOM元素,但是Vue等框架已经不推荐自己操作DOM了,都扔给框架...

网友评论

      本文标题:19.ref获取DOM元素和组件

      本文链接:https://www.haomeiwen.com/subject/njobjctx.html