引入:
你知道的vue是不提倡直接操作DOM的 那比如要DOM元素怎么办,绑定class属性,通过数据来控制class属性的变化是一种方法,那还可以用住粗ref来实现
- 获取DOM元素
- 修改DOM元素样式
- 获取子组件数据或者使用子组件方法
- 子组件也能获取到父组件的数据
- 获取兄弟组件数据
<body>
<div id="app">
父组件数据:{{msg}}
<br>
<input type="button" @click="change" value="点击触发">
<p ref="text">过ref能变红吗?</p>
<login ref="login"></login>
<login2 ref="login2"></login2>
</div>
</body>
<script>
var login = {
template: `<h1>子组件数据:{{msg}}</h1>`,
data() {
return {
msg: "原来数据能被改吗",
aa: "bad"
}
},
methods: {
getmsg(msg) {
console.log(msg); //拿到父组件数据
}
}
};
var login2 = {
template: `<h3>fddfdfd--{{msg}}</h3>`,
data() {
return {
msg: "good"
}
}
}
var vm = new Vue({
el: '#app',
data: {
msg: "父组件能拿到子组件数据吗"
},
methods: {
change() {
this.$refs.text.style = "color :red"; //能改子组件样式
this.$refs.login.getmsg(this.msg) //父组件数据传递给子组件
this.msg = this.$refs.login.msg; //子组件数据传给父组件
this.$refs.login.msg = "新数据"; //更改子组件数据
this.$refs.login2.msg = this.$refs.login.aa; //更改兄弟组件数据
}
},
components: {
login,
login2,
}
})
</script>
总结:
通过注册ref 就可以通过this.$ref 获取到DOM集合 接下来就可以不用直接的操作DOM 就可以直接来改变DOM元素样式,以及获取到子组件数据,传递子组件数据等,所以父组件要获取子组件数据不仅仅可以用$emit()触发,更强大的是子组件也能获取父组件数据,不仅是靠props来获取,并且使用简单,起码比用props $emit()好理解,除此之外兄弟组件之间的数据也能获得,你说功能强大不强大