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()             //调用子级中的方法
    },},

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