vue 使用ref 让父组件调用子组件的方法

来源：懂视网责编：小采时间：2020-11-27 22:19:45

vue 使用ref 让父组件调用子组件的方法

vue 使用ref 让父组件调用子组件的方法:父级组件上的三个按钮可以调用子组件loading的三个方法，执行不同的操作 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <script src=vue.js charset=utf-8><

推荐度：

点击下载本文 文档为doc格式

导读vue 使用ref 让父组件调用子组件的方法:父级组件上的三个按钮可以调用子组件loading的三个方法，执行不同的操作 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <script src=vue.js charset=utf-8><

父级组件上的三个按钮可以

调用子组件loading的三个方法，执行不同的操作

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <script src="vue.js" charset="utf-8"></script>
</head>
<body>
 <div id="app">
 <loading ref='load'></loading>
 <button type="button" @click='show'>显示</button>
 <button type="button" @click='hide'>隐藏</button>
 <button type="button" @click='changeColor'>变色</button>
 </div>
</body>
<script type="text/javascript">
 let loading = {
 data() {
 return {
 flag: true
 }
 },
 template: '<div v-show="flag">loading...</div>',
 methods: {
 hide() {
 this.flag = false
 },
 show() {
 this.flag = true
 }
 }
 }
 let vm = new Vue({
 el: '#app',
 components: {
 loading
 },
 methods: {
 // 在组件上的ref获取组件实例
 // 标签的ref 获得标签的dom
 // 使用refs 获取组件实例，然后调用组件的方法即可
 hide() {
 this.$refs.load.hide()
 },
 show() {
 this.$refs.load.show()
 },
 changeColor() {
 // 获取dom实例 操作样式
 this.$refs.load.$el.style.background = 'red'
 }
 }
 })
</script>
</html>

总结

以上所述是小编给大家介绍的vue 使用ref 让父组件调用子组件的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

vue 使用ref 让父组件调用子组件的方法

推荐度：

点击下载本文 文档为doc格式

标签： VUE 的方法 ref

热门焦点

vue 使用ref 让父组件调用子组件的方法

vue 使用ref 让父组件调用子组件的方法

vue 使用ref 让父组件调用子组件的方法

最新推荐

猜你喜欢

热门推荐