<div> <input type="text" ref="msgText" v-model="msg" /> <button @click="getElement">获取元素值</button> <hr> <child ref="childComponent"></child> </div> <template> <div> <input type="datetime" v-model="local"> <button @click="getLocalData">获取当前时间</button> </div> </template> <script> var vm = new Vue({ el: "#app", data: { msg: 'Hello ref' }, mounted() { console.log('mounted: ' + this.$refs.msgText.value) }, methods: { getElement() { console.log('input 输入框的值为：' + this.$refs.msgText.value) this.$refs.childComponent.getLocalData() console.log('子组件 input 输入框的值为：' + this.$refs.childComponent.local) } }, components: { 'child': { template: '#child', data() { return { local: '' } }, methods: { getLocalData() { var date = new Date() this.local = date.toLocaleString() } }, } } }); </script>
可以看到，当我们将 ref 添加到子组件上，我们就可以在 Vue 实例上获取到这个注册的组件引用，同注册的 DOM 元素一样，我们都可以使用添加的 ref 属性值作为 key 获取到注册的对象。此时，我们就可以获取到这个子组件上的 data 选项和 methods 选项。
三、总结#
因为 Vue 采用 Virtual DOM 的做法渲染网页，如果我们直接操作 DOM，很容易产生实际网页跟 Vue 产生的 Virtual DOM 不同步的问题，而通过使用 ref 属性之后，在一些需要获取 DOM 元素的情况下，我们就可以很方便的获取 DOM 元素。当然，当我们决定在项目中使用 Vue，还是需要转变我们的思路，将操作 DOM 转变成操作数据。同样的，通过将 ref 属性添加到子组件上，我们就可以很轻松的获取到子组件的相关信息，这无疑给父组件获取子组件数据、调用子组件的方法提供了一种新的思路。
以上所述是小编给大家介绍的Vue 中 ref 的使用,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: