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

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

调用子组件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父组件向子组件动态传值的两种方法
  • vue父组件中获取子组件中的数据(实例讲解)
  • vue父组件通过props如何向子组件传递方法详解
  • 详解vue2父组件传递props异步数据到子组件的问题
  • 详解vue.js2.0父组件点击触发子组件方法
  • Vue2.x中的父组件传递数据至子组件的方法
赞 (0)

相关推荐

  • vue父组件向子组件动态传值的两种方法

    在一些项目需求中需要父组件向子组件动态传值,比如我这里的需求是,父组件动态通过axios获取返回的图片url数组然后传给子组件,上传图片的子组件拿到该数组后进行遍历并展示图片 方法有两种, 方法一: props传值,这里注意一个问题,传过来的值需要用watch监听并赋值,否则这里获取到的是空数组   父组件: <uploadImg :width="200" :height="200" name="productImage" size=&qu

  • Vue2.x中的父组件传递数据至子组件的方法

    Vue2.x中的父组件传递数据至子组件的方法

    父组件结构 template <template> <div> <v-girl-group :girls="aGirls"></v-girl-group> </div> </template> script <script> import vGirlGroup from './GirlGroup' export default { name: 'girl', components: { vGirlGro

  • 详解vue2父组件传递props异步数据到子组件的问题

    测试环境:vue v2.3.3, vue v2.3.1 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-data="asyncData"></child> </div> </template> <script> import child from './child' export de

  • vue父组件通过props如何向子组件传递方法详解

    前言 本文主要给大家介绍了关于vue中父组件通过props向子组件传递方法的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: vue 组件中的 this vue 中 data/computed/methods 中 this的上下文是vue实例,需注意. 例如: 注意:不应该对 data 属性使用箭头函数 (例如data: () => { return { a: this.myProp }} ) .理由是箭头函数绑定了父级作用域的上下文,所以 this 将不会按照期望指向 Vue 实例

  • vue父组件中获取子组件中的数据(实例讲解)

    如下所示: <FormItem label="上传头像" prop="image"> <uploadImg :width="150" :height="150" :name="'avatar'" size="150px*150px" ref="avatar"></uploadImg> </FormItem> <Fo

  • 详解vue.js2.0父组件点击触发子组件方法

    之前关于vue.js2.0父组件的一点学习,最近需要回顾,就顺便发到随笔上了 <body> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:ee="incrementTotal"></button-counter> <button-counter v-on:ee="increment

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

    父级组件上的三个按钮可以 调用子组件loading的三个方法,执行不同的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="vue.js" charset="utf-8"></script> </head> <body> <div id="app&qu

  • Vue父组件调用子组件事件方法

    Vue父组件向子组件传递事件/调用事件 不是传递数据(props)哦,适用于 Vue 2.0 方法一:子组件监听父组件发送的方法 方法二:父组件调用子组件方法 子组件: export default { mounted: function () { this.$nextTick(function () { this.$on('childMethod', function () { console.log('监听成功') }) }) }, methods { callMethod () { con

  • vue 父组件调用子组件方法及事件

    情景: 父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块. 父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部. 父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块: 设想思路:点击父组件中的按钮触发子组件中上传方法: 子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法 子组件中处理上传的方法: fileClick(index) { c

  • Vue子组件向父组件通信与父组件调用子组件中的方法

    Vue子组件向父组件通信与父组件调用子组件中的方法

    子组件向父组件通信 子组件的button按钮绑定点击事件,事件方法名为sendToParent(), 该方法在子组件的methods中声明,实现功能this.$emit('cus-event',this.msg); 在父组件引入子组件,并给cus-event事件绑定doAction($event)方法,该方法中this.msg = e;console.log(e), 而msg已经在data中声明,其值为"子级消息",故最终的输出结果为: 展示父级接收到的消息:子级消息 父组件调用子组件

  • Vue父组件调用子组件函数实现

    Vue父组件调用子组件函数实现

    Vue父组件调用子组件的函数 父组件通过事件调用子组件的函数.例如父组件通过 点击事件 让子组件发请求. 文章中的项目已经通过脚手架去创建. DEMO: Father.js <template> <div> <div> <son ref="son"></son> <input type="button" value="点击" @click="useSonFun"

  • 关于vue父组件调用子组件的方法

    组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素. 所有的 Vue 组件同时也都是 Vue 的实例,所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子. 我们都知道通过$ref可以获取到某个DOM,但是它也可以用来获取子组件的实例,调用子组件的方法 例: 子

  • vue父组件调用子组件方法报错问题及解决

    目录 vue父组件调用子组件方法报错 vue父组件调用子组件方法及遇到的问题 vue父组件调用子组件方法报错 在父组件定义了一个tab标签页,每一个标签页下面都调用不同的组件, 如下图所示: 子组件中定义的方法: setup() { const getList = () =>{ const date = moment(new Date()).format('YYYY-MM') loading.value = true apiGetPageList({ salaryDate: date, page

  • 详解Vue3 父组件调用子组件方法($refs 在setup()、＜script setup＞ 中使用)

    在 vue2 中 ref 被用来获取对应的子元素,然后调用子元素内部的方法. <template> <!-- 子组件 --> <TestComponent ref="TestComponent"></TestComponent> </template> <script> // 导入子组件 import TestComponent from './TestComponent' export default { com

  • React父组件调用子组件中的方法实例详解

    目录 Class组件 1. 自定义事件 2. 使用 React.createRef() 3. 使用回调Refs Function组件 补充:子组件调用父组件方法 总结 文章中涉及 ref 的应用仅为父组件调用子组件场景下的应用方式,并未涵盖 ref 的所有应用方式! Class组件 1. 自定义事件  Parent.js import React, { Component } from 'react'; import Child from './Child'; class Parent exte

  • react父组件调用子组件的方式汇总

    目录 前言 父子组件都为class 父子组件都为hooks 父组件为class,子组件为hooks 父组件为hooks,子组件是class 小结 前言 本文是小结类文章,主要总结一下工作中遇到的父组件调用子组件方法.当然除了用ref之外还有很多其他方式,本文仅仅列举ref的方式.分别介绍父子组件都为class:父子组件都是hooks:父组件是class子组件是hooks:父组件是hooks,子组件是class的各种情况的调用方式. 父子组件都为class 父子组件都是class,父组件调用子组件

随机推荐