精华内容
下载资源
问答
  • 父组件调用子组件的方法:  1.给子组件定义一个ref属性。eg:ref="childItem"  2.在子组件的methods中声明一个函数。eg: useInPar:function (str) {console.log(str)}  2. 在父组件的中声明一个函数,并通过...
  • 下面小编就为大家分享一篇Vue父组件调用子组件事件方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块: 设想思路:点击父组件中的按钮触发子组件中上传方法:子组件上定义ref="refName",父组件方法中用this.$refs.refName.method...

    情景:

    父组件中引入上传附件的子组件:点击组件可以分别上传对应要求的图片,子组件内部循环可创建多个模块.

    父组件传入数组子组件循环来创建不同的组件模块,所有事件都在子组件内部.

    be50361dca6919e8f9df12f679e3715b.png

    父组件页面的上方同时有一个上传图片按钮上传图片后会显示在第一个模块:

    fd4aa558c0b6d0028a5cc15bc86ba679.png

    设想思路:点击父组件中的按钮触发子组件中上传方法:

    子组件上定义ref="refName",父组件的方法中用this.$refs.refName.method去调用子组件方法

    子组件中处理上传的方法: fileClick(index) {

    console.log('子组件的fileClick被调用了')

    console.log('index: '+index)

    // this.aaa();

    if(!this.fileInfor[index].imgUrl){

    //如果当前框里没有图片,则实现上传

    document.getElementsByClassName('upload_file')[index].click();

    }

    },

    父组件template

    上传图片

    父组件method中定义方法,同时传入相应的index值. Upload(){

    // console.log('父组件的xiechengUpload被调用了')

    this.$refs.uploadRef.fileClick(0);

    },

    此时就可以通过上传按钮将图片放到子组件的第一个模块中了.

    下面看下Vue父组件调用子组件事件

    Vue父组件向子组件传递事件/调用事件

    不是传递数据(props)哦,适用于 Vue 2.0

    方法一:子组件监听父组件发送的方法

    方法二:父组件调用子组件方法

    子组件: export default {

    mounted: function () {

    this.$nextTick(function () {

    this.$on('childMethod', function () {

    console.log('监听成功')

    })

    })

    },

    methods {

    callMethod () {

    console.log('调用成功')

    }

    }

    }

    父组件:

    export default {

    methods: {

    click () {

    this.$refs.child.$emit('childMethod') // 方法1

    this.$refs.child.callMethod() // 方法2

    },

    components: {

    child: child

    }

    }

    总结

    以上所述是小编给大家介绍的vue 父组件调用子组件方法及事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对聚米学院网站的支持!

    展开全文
  • 主要介绍了vue 使用ref 让父组件调用子组件的方法,需要的朋友可以参考下
  • 使用的组件是自定义组件Table,类似ElementUI中el-table组件的formatter首先我们想到的是$emit调用父组件取返回值,this.$emit(方法名, 传参1, 传参2),但是此方法的返回值是vue对象,而不是父组件方法的return值...

    项目中渲染页面列表,遇到与后台接口联调返回的字段需要翻译,使用的组件是自定义组件Table,类似ElementUI中el-table组件的formatter

    首先我们想到的是$emit调用父组件取返回值,this.$emit(方法名, 传参1, 传参2),但是此方法的返回值是vue对象,而不是父组件方法的return值(错误代码就不展示了)

    1、尝试曲线救国,使用this.$parent

    子组件直接调用父组件方法:

    translateFilter(columnsItem,dataItem){return this.$parent.translateFilter({

    key:columnsItem.key,

    data:dataItem[columnsItem.key]

    })

    },

    en...解决了。但是不尽人意,这种方法开发组件对使用者很不友好。

    2、this.$emit方法,用回调函数作为参数,父组件里执行该回调函数,返回值后给子组件,然后子组件再接收

    子组件调用父组件方法,执行回调函数:

    translateFil(columnsItem,dataItem){

    let itemName= null;this.$emit('translateFilter',{

    key:columnsItem.key,

    data:dataItem[columnsItem.key]

    }, val=> { itemName =val })returnitemName

    },

    这里注意是es6的写法:

    val => { itemName =val }

    等价于

    function(val){

    itemName = val;

    return itemName

    }

    父组件定义方法:

    translateFilter(obj,callback) {

    let objChild= null;if(obj.key == 'headFlag'){

    objChild= this.headFlagData.find(item => item.label ==obj.data)

    }else if(obj.key == 'contactGender') {

    objChild= this.sexArray.find(item => item.label ==obj.data)

    }

    callback(objChild? objChild.value : ''); //执行作为参数的函数

    },

    3、通过传Function,子组件可获取到父组件的方法。

    子组件方法:

    props: {//子组件接收函数

    translateFil: {

    type: Function

    }

    },

    translateFilter(columnsItem,dataItem){this.translateFil({

    key:columnsItem.key,

    data:dataItem[columnsItem.key]

    })returnitemName

    },

    展开全文
  • 第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件方法 第二种方法是在子组件里用$emit 向父组件触发一个事件,父组件监听这个事件就行了 第三种是父组件把方法传入子组件中,在子组件里直接调用这...

    **一共有三种方式

    • 第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件的方法
    • 第二种方法是在子组件里用$emit 向父组件触发一个事件,父组件监听这个事件就行了
    • 第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法

    第一种方法是直接在子组件中通过 this.$parent.event 来调用父组件的方法

    父组件

    <template>
      <div>
        <child></child>
      </div>
    </template>
    <script>
      import child from '~/components/dam/child';
      export default {
        components: {
          child
        },
        methods: {
          fatherMethod() {
            console.log('测试');
          }
        }
      };
    </script>
    

    子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$parent.fatherMethod();
          }
        }
      };
    </script>
    

    第二种方法是在子组件里用$emit 向父组件触发一个事件,父组件监听这个事件就行了

    父组件

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

    子组件

    <template>
      <div>
        <button @click="childMethod()">点击</button>
      </div>
    </template>
    <script>
      export default {
        methods: {
          childMethod() {
            this.$emit("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>
    

    子组件

    <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>
    
    展开全文
  • 1、首先想到的是$emit(),但是此方法返回值是vue对象,而不是父组件方法中return的值,这里就不展示了。 2、然后曾经我也用过$parent直接调用父级的方法,如下 sexFilter(value){ return this.$parent.sexFilter...

    有木有遇到项目中列表渲染时,后台返回数据需要翻译,如返回的是 1/0,需要翻译成 男/女,当然,如果你直接用的,则直接编写方法或filter即可,这里说的是自定义封装的table组件。

    1、首先想到的是$emit(),但是此方法返回值是vue对象,而不是父组件方法中return的值,这里就不展示了。

    2、然后曾经我也用过$parent直接调用父级的方法,如下

    sexFilter(value){
        return this.$parent.sexFilter(value)
    }

    但是也总觉得有点别扭,不太科学,更重要的是如果你父组件中调用子组件时又是套在其他组件中的,如

    <Drawer>
        <child></child>
    </Drawer>

    这样的话在子组件用$parent.sexFilter()就可能会找不到该方法了,需要两层$parent才能正确找到该方法(有遇到过的请举手)。

    3、另外一种,父组件把方法传递给子组件

    <Table :translateFilter="translateFilter"></Table>

    然后子组件通过props接收,然后直接调用,如果是固定几个方法也可以用,要是方法名都是完全动态的,就尴尬了。。。

    4、最后介绍另一种方法:this.$emit方法,用回调函数作为参数,父组件里执行该回调函数,返回值后给子组件,然后子组件再接收,父组件:

    <Table @translateFilter="translateFilter"></Table>

    父组件方法:

    translateFilter(obj,callback){
          let objChild = null;
          if(obj.key == 'sex'){
              objChild = this.sexList.find(item => item.value == obj.value)
          }
          callback(objChild ? objChild.label : '');  // 执行作为参数的函数,传入文字翻译
        }

    子组件调用:

    
    valFormatter(key, val){
           let itemName = null;
            this.$emit('translateFilter',{
                key:key,
                value:val
            }, val => { itemName = val })
    
            return itemName
    
        }

    展开全文
  • Vue中子组件调用父组件方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件方法 父组件 <template> <div> <child></child> </div&...
  • 子组件调用父组件方法并传递数据 注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: <button @click="emitEvent">点击我</button> [removed] export default { data() { return {...
  • 一,bind方法的使用 例: ui作为一个对象 data() { return { ui:{}//ui作为一个对象 } } 初始化中,给ui绑定一个方法editDesignTree,使用bind指针指向某个具体方法 //初始化中,给ui绑定一个方法editDesignTree...
  • 父组件(index): <template> <div> <subcomponents @fatherMethod="fatherMethod"></subcomponents> </div> </template> <script> import subcomponents from '@/...
  • 可以使用props将父组件的数据传给子组件。子组件在接受数据时要显示声明props。下面通过一个例子给大家介绍Vue父组件向子组件通信的方法,需要的朋友参考下吧
  • vue3.0 子组件调用父组件中的方法

    千次阅读 2021-07-31 17:45:17
    vue2中,子组件调用父组件,直接使用this.$emit()即可。 但是在vue3中,很显然使用this.$emit() 已经开始报错了,为什么会报错呢? 原因是:在vue3中setup是在声明周期beforeCreate和created前执行,此时vue对象还...
  • 主要介绍了Vue子组件向父组件通信与父组件调用子组件中的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 主要给大家介绍了关于vue.js中父组件调用子组件内部方法的相关资料,文中给出来了详细的示例代码供大家参考学习,对大家的学习或者工作具有一定的参考价值,需要的朋友们下面随着小编来一起学习学习吧。
  • 主要比较两种调用方法:this.parent.func()∗∗和∗∗this.parent.func()**和**this.parent.func()∗∗和∗∗this.emit(‘func’) 项目原来使用this.parent.func(),在一层子组件尚行,未出现bug,但是多层子组件嵌套...
  • 1.子组件内不允许直接修改父组件传过来的参数。错误实例:子组件代码直接对data参数进行修改,则会提示错误。vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be ...
  • 1、父组件: &lt;template&gt; &lt;div&gt; &lt;div v-if="!userShow"&gt; 父组件内容区 &lt;el-button @click="lookUserInfo(scope.row)"&gt;&...
  • 父组件: &lt;div&gt; &lt;Design @MLdata="...MLdata是自定义调用名称...getML是父组件方法 子组件: this.$emit('MLdata', { code: data.Code, }); MLdata父组件自定义的调用名称...
  • vue3 父组件调用子组件中方法

    千次阅读 2021-05-18 13:26:35
    方案一 子组件中: 定义方法,fnName() {…} 父组件中: setup() { let childRef = ref(null) return { childRef } } 调用:this.childRef.value.fnName() 方案二
  • 今天小编就为大家分享一篇vue 父组件通过$refs获取子组件的值和方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 失效原因就是在created()域调用时,子组件还未成功渲染,因此设置一个延缓时间即可,网上找的答案是 <projectNode v-if="nodeVisable" ref="pNode">... // 调用组件方法 this.$refs.pNode.getNodeData
  • vue3.0父组件调用子组件里的方法

    千次阅读 2020-11-03 10:41:59
    vue3.0父组件调用子组件里的方法 这是父组件 <template> <div class="mt-5"> <Son ref="RefChilde"></Son> <div class="btn btn-primary my-2" @click="fnCallChild"> 点我调用...
  • 触发点击事件后,控制台没有错误提示 ![触发点击事件后,控制台没有错误提示](https://img-ask.csdn.net/upload/201905/09/1557384069_665132.png) ![图片说明]... !...
  • 父组件 <!-- 首页 -->...-- 父组件调用组件方法 --> <div> <button @click="getChildFun">父组件调用组件方法</button> </div> <!-- 组件 --> <chil
  • 没想到第一篇要分享的竟然是前端的内容,在进入项目组之前我所会的只是一些原生的html、js,目前前台最流行的两大框架Vue和React基本没接触过,正式接过来需求之后,因为研发项目组前端人员紧张,我就不得不硬着头皮...
  • vue子组件调用父组件父页面的方法

    万次阅读 2019-02-15 17:07:48
    如图:选择城市后,页面重新请求...第一种方法是直接在子组件中通过this.$parent.event来调用父组件方法 父组件 <template> <div> <child></child> </div> </template>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 39,279
精华内容 15,711
关键字:

vue怎么调用父组件方法

vue 订阅