在项目开发时,我们常常用到ref和refs两个属性。
一、一般来说,如果我们把ref属性定义到html元素之上,我们就可以对html元素进行DOM操作了,省去了传统的Document.getlelementById操作了,
例如:
<input type="text" ref="input" /> <p ref="word">测试文字</p> <script> new Vue({ el: "#app", mounted(){ this.$refs.word.style.color="red" this.$refs.input1.value = "22"; } }) </script>
注意:vue的生命周期,如果在节点DOM为实例化之前使用this.$refs属性会报错,vue生命周期中mounted才完成DOM实例化!
二、ref属性用在子组件之中
我们常常在子组件使用ref属性 来获取子组件的data属性值或者方法
<child ref=child></child> <script> new Vue({ el: "#app", created() { }, mounted() { console.log(this.$refs.child.childWord)//获取子组件中data中的信息 console.log(this.$refs.child.getchildInfo())//通过子组件的方法获取信息 }, components: { child: { template: "#child", data() { return { childWord: "子组件信息" } }, methods: { getchildInfo: function() { return "我通过子组件方法获取的信息!" } } } } }) </script>