【Vue】ref的用法

Vue提供了一个调用dom的属性，ref。

基本用法，本页面获取dom元素

绑定在dom元素上时，用起来与id差不多，通过this.$refs来调用：

<div ref="test">test</div>

console.log(this.$refs.test)

输出：

看到打印出来就是绑定的dom对象，可以用来执行一些dom操作，比如操作样式，获取属性等：

let testDom = this.$refs.test
testDom.style.height = '200px'
testDom.style.background = 'red'
console.log(testDom.clientHeight)

可以看到如果绑定在普通的dom元素上，与id用法基本一样，那肯定还有别的用法，比如 循环渲染：

//简单的数组:
    list:[1,2,3,4]
//绑定在循环渲染上
    <ul>
      <li v-for="(item,index) in list" :key="index" ref="list">
        {{index}}--{{item}}
      </li>
    </ul>
//打印看一下这个ref="list"是什么
    console.log(this.$refs.list)

可以看到是个数组，也很好理解，数组的每一项就是每个li元素。

获取子组件中的data

子组件：

<template>
  <div>
      {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world"
    }
  }
}
</script>

父组件：

<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      console.log(this.$refs.hello.msg)
    }
  }
};
</script>

调用子组件中的方法

子组件：

<template>
  <div>
  </div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log("调用到了")
    }
  }
}
</script>

父组件：

<template>
  <div id="app">
    <HelloWorld ref="hello"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      this.$refs.hello.open();
    }
  }
};
</script>

子组件调用父组件方法

子组件：

<template>
  <div>
</div>
</template>

<script>
export default {
  methods: {
    open() {
      console.log("调用了");
      //  调用父组件方法
      this.$emit("refreshData");
    }
  }
}
</script>

父组件：

<template>
  <div id="app">
    <HelloWorld ref="hello" @refreshData="getData"/>
    <button @click="getHello">获取helloworld组件中的值</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld
  },
  data() {
    return {}
  },
  methods: {
    getHello() {
      this.$refs.hello.open()
    },
    getData() {
      console.log('111111')
    }
  }
};
</script>