标签：type inf 图片 img html元素 put getc htm template
在项目开发时，我们常常用到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>
标签：type inf 图片 img html元素 put getc htm template
原文地址：https://www.cnblogs.com/agen-su/p/13908258.html
