uni.app 子组件调用父组件的方法并传递数据

作者:神秘网友 发布时间:2021-11-25 14:06:41

uni.app 子组件调用父组件的方法并传递数据

$refs

子组件
 
template
  button点击我/button
/template
script
  export default {
    methods: {
      emitEvent(msg){
        console.log('接收的数据---------'+msg)//接收的数据---------我是父组件中的数据
      }
    }
  }
/script
 
父组件
 
template
  div 
    child-a ref="child"/child-a
    !--用ref给子组件起个名字--
    button @click="getMyEvent"点击父组件/button
  /div
/template
script
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    data() {
      return {
        msg: "我是父组件中的数据"
      }
    },
    methods: {
      getMyEvent(){
          this.$refs.child.emitEvent(this.msg);
          //调用子组件的方法,child是上边ref起的名字,emitEvent是子组件的方法。
      }
    }
  }
/script


$emit

子组件
 
template
  button @click="emitEvent"点击我/button
/template
script
  export default {
    data() {
      return {
        msg: "我是子组件中的数据"
      }
    },
    methods: {
      emitEvent(){
        this.$emit('my-event', this.msg)
        //通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
      }
    }
  }
/script
 
父组件
 
template
  div 
    child-a @my-event="getMyEvent"/child-a
    !--父组件中通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值--
  /div
/template
script
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    methods: {
      getMyEvent(msg){
          console.log('接收的数据---------'+msg)//接收的数据---------我是子组件中的数据
      }
    }
  }
/script

第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法

子组件

template
  div
    button @click="childMethod()"点击/button
  /div
/template
script
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
/script

父组件
template
  div
    child :fatherMethod="fatherMethod"/child
  /div
/template
script
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('测试');
      }
    }
  };
/script

具体方法查看:
https://www.cnblogs.com/hanli-you/p/8011719.html
https://www.cnblogs.com/jin-zhe/p/9523782.html

本文章教程介绍完毕,更多请访问跳墙网其他文章教程!

uni.app 子组件调用父组件的方法并传递数据 相关文章

  1. vue:父组件调用子组件的方法和子组件调用父组件的方法

    父组件调用子组件的方法 组件中使用ref和$refs来实现给子组件传值或者调用子组件的方法 在Vue中一般很少会用到直接操作DOM,但不可避免有时候需要用到,这时我们可以通过ref和$refs这两个来实现. ref被用来给子组件注册引用信...

  2. 父组件调用子组件的方法

    父组件调用子组件的方法 父组件中: More ref=“naform” :ArrayValue1=“ArrayValue1” @getName=“showModel2” :dcName=“diaochuName” :dcId=“diaochuID” Button type=“primary” @click=“Determined”确定 Button type=“default” @click=“advan

  3. vue中父组件调用子组件的方法

    子组件: template div child /div/template script export default { name: "child", props: "someprops", methods: { parentHandleclick(e) { //父组件要调用的方法 console.log(e) } } }/script 父组件: templatedivbutton @click="clickParent"点击/but

  4. 父组件向子组件传递数组格式数据子组件为picker

    父组件向子组件传递数组格式数据,子组件为picker 前言 :在vue项目中,子组件是一个弹框,需要在父组件中显示此弹框,其弹框内容来自于父组件。父子组件之间的传值通过props来实现。 A为父组件页面,B为子组件页面。其中父...

  5. vue父组件如何调用子组件里面的方法

    vue父组件如何调用子组件里面的方法 在vue里,父组件要调用子组件里边定义的方法,可以通过ref属性来获取到子组件的方法并执行,下面直接贴上子组件和父组件的代码吧! 父组件代码: template div class=parent div class=parent-wrapper ...

  6. Vue学习15----父组件主动获取子组件的数据和方法,子组件主动获取父组件的数据和方法

    简介 这篇文章主要介绍了Vue学习15----父组件主动获取子组件的数据和方法,子组件主动获取父组件的数据和方法以及相关的经验技巧,文章约58967字,浏览量206,点赞数2,值得参考! 父组件主动获取子组件的数据和方法: 1.调...

  7. 微信小程序中父组件调用子组件的方法 学习记录

    微信小程序中父组件调用子组件的方法 学习记录 今天在写项目的同时,遇到一个问题,就是子组件的一个方法,需要在父组件中使用。这个问题难倒我了,去网上查了查,才知道怎么解决。下面就是我的解决办法。 第一...

  8. vue父组件调用子组件方法,失效解决方案

    vue父组件调用子组件方法,失效解决方案 失效原因就是在created()域调用时,子组件还未成功渲染,因此设置一个延缓时间即可,网上找的答案是 projectNode v-if=nodeVisable ref=pNode/projectNode // created中调用: checkNode(index, row) { this.nodeVisa...

  9. vue子组件调用父组件方法$emit没有生效

    vue子组件调用父组件方法$emit没有生效 一开始查百度,别人都说 this.$emit(方法名, 参数);里面的方法名不能是驼峰法,试了下不行; 还有说emit不能写在axios里的,于是我拿到外面去了也不行; 最后谷歌查,原来是父组件里的子组...

  10. Vue.js中使用插槽将数据从父组件传递到子组件

    这篇文章给大家介绍一下如何使用Vue插槽在Vue.js中将数据从父组件传递到子组件。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 这篇文章适合所有阶段的开发人员(包括初学者)。 在你开始之前 您的...

  11. vue element子组件中调用父组件数据

    vue element子组件中调用父组件数据 vue element子组件中调用父组件数据 看图吧。我是一个沉默寡言的代码编辑者。图中描述的应该算是比较详细的了。 图一:一个是小头爸爸,一个是大头儿子 图二:爸爸给儿子取了一个好听的名...

  12. #uniapp 子组件调用父页面中的方法#

    #uniapp 子组件调用父页面中的方法# 1.创建一个组件,并在页面上调用引用 2.在页面引用组件时,通过v-on绑定父组件内定义好的方法 3.在子组件内绑定@click触发子组件内定义的方法,同时在子组件内通过this.$emit触发父组件内绑定...

  13. Vue3 CompositionAPI 组合式API 子组件向父组件传递数据(通信)

    Vue3 CompositionAPI 组合式API 子组件向父组件传递数据(通信) 传递给 setup 函数的第二个参数是 context。context 是一个普通的 JavaScript 对象,它暴露三个组件的 property:attrs,slots和emits,其中emit就是Vue2中的$emit方法 现在使用Vue3风格...

  14. 【vue】父组件传递数据给子组件报错:Avoid mutating a prop dir

    【vue】父组件传递数据给子组件报错:Avoid mutating a prop directly since the value will be overwritten whenever the 报错信息 在vue父组件传递数据给子组件时候,通过双向绑定给属性赋值时候,报错如下:Avoid mutating a prop directly since the valu

  15. 微信小程序子组件监听父组件传递的值

    Component({ properties: { qa: Object, }, observers: { qa: function (params) { console.log(params) },

  16. vue中让子组件修改父组件数据的方法

    一、关于vue中watch的认识 我们要监听一个属性的的变化就使用watch一般是父组件传递给子组件的时候 ?1、常见的使用场景 ...watch:{ value(val) { console.log(val); this.visible = val; }}... 相关学习推荐:javascript视频教程 ?2、如果要一开始就执...

  17. Vue组件 父组件使用子组件中的值(子组件给父组件传值的方法)

    父组件给子组件传值使用props自定义属性来实现,子组件传值给父组件可以用自定义事件和事件发射来实现,以下是具体实现方法。 一、父组件内容 @isErrShow自定义事件 template div class="certification" Success v-if="successShow"/Success error v-...

  18. Angular2父子组件之间数据传递@ViewChild获取子组件(属性方法)

    Angular2父子组件之间数据传递:@ViewChild获取子组件(属性、方法) 原文出处:http://blog.csdn.net/long328583644/article/details/74894446 我们在《Angular2父子组件之间数据传递:局部变量获取子组件》讲到过(如果有不懂的,可以先去看看)...

  19. vue组件开发小demo(主要涉及子父组件的相互调用)

    vue组件开发小demo(主要涉及子父组件的相互调用) 父组件按钮,点击后获取子组件data后alert 子组件按钮,点击后获取父组件data后alert 对于后端开发写页面来说,我觉得会有很大帮助,具体讲解代码注释写的挺全,可以看代码 ...

  20. 父组件不通过事件监听子组件变化并取值

    父组件不通过事件监听子组件变化并取值 父组件不通过事件监听子组件变化并取值 背景介绍: 一、子组件中添加监听 二、将数据传到store 三、getters返回值 四、父组件调用getters 最近在做一个版本数据管理系统,父组件中计算...

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2021, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词