vue中获取dom对象-$refs与ref

vue中获取dom对象

vue中获取dom对象的语法:

<div ref="自定义对象名"></div>
this.$refs."自定义对象名"

$refs组件需要搭配ref来使用

例子:绑定这个div

html中:

<div ref="mydiv"></div>

而此时在函数方法中获取这个盒子就需要

this.$refs.mydiv

专门收集的这个组件中,有refs属性的标签,作为自己($refs对象)的属性,就可以

进行原生JS操作

 

ref收集子组件中的数据与方法

ref并且不光能收集自己页面中等ref绑定了的元素,并且还能获取到子级的属性标签

    <p ref="op">p标签内部文本</p>
   <button @click="hdClick"></button>
   <Child ref="child"></Child>     //子级也需要去绑定

子级当中:

export default {
   data() {
       return {
           cmsg: "这是子组件的信息"
      }},
   methods: {
       cfn() {
           console.log("这是子组件的方法");
      },
},};

 

书写格式:

methods: {
   hdClick() {
     console.log(this.$refs.cmsg);
     this.$refs.Child.cfn()             //调用子级中的方法
  },},

可以看到,直接调用子组件中的方法即可

 
posted @ 2022-11-05 22:11  Dollom  阅读(413)  评论(0)    收藏  举报