ref属性相当于给标签设置了一个ID,可以使用该特殊标识来进行一些DOM的操作,但是使用的时候有如下几个注意事项:
ref属性值绑定元素都是唯一的,如果一个ref属性绑定了多个dom节点,那么这个ref属性将会默认绑定到最后设置该ref属性值的DOM节点。
使用时不是直接this.ref值进行访问DOM节点,而是需要通过this.refs属性内。
所有的ref属性进行的操作都不是响应式的,所以避免在计算属性(Computed),和模板({{}})中使用ref属性。
ref功能还是比较强大的,可以通过ref去调用子组件的方法和data里面的变量,当然调用的时候还是需要使用到nextTick这个全局函数的,vue的生命周期的限制,如果不使用nextTick可能会导致undefined也可能会报错
基本用法,本页面获取dom元素
<template> <div id="app"> <div ref="testDom">11111</div> <button @click="getTest">获取test节点</button> </div> </template> <script> export default { methods: { getTest() { console.log(this.$refs.testDom) } } }; </script>
调用子组件中的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>