首页 > 其他分享 >Vue 子组件调用父组件方法[含参数版]

Vue 子组件调用父组件方法[含参数版]

时间:2022-11-15 09:34:37浏览次数:41  
标签:Vue obj parent emit 调用 child 组件 event

  • 子组件

<template>
  <div>
    <button @click="childEvent(_obj)">点击调父组件方法</button>
  </div>
</template>
<script>
  export default {
    methods: {
      //   _obj 为参数
      childEvent(_obj) {
        this.$emit('parent-event', _obj);
      }
    }
  };
</script>

子组件发出
this.$emit('parent-event', _obj);

$emit: 发出
parent-event : 方法
_obj : 参数
  • 父组件

<template>
  <div>
    <child @parent-event="parentEvent"></child>
  </div>
</template>
<script>
  import child from './child';
  export default {
    components: {
      child
    },
    methods: {
      parentEvent(_obj) {
        console.log('我是父类方法' + _obj);
      }
    }
  };
</script>

父组件接收
<child @parent-event="parentEvent"></child>
@parent-event : 接收

标签:Vue,obj,parent,emit,调用,child,组件,event
From: https://www.cnblogs.com/IT-IOS-MAN/p/16891353.html

相关文章

  • Vue 父组件调子组件方法[含参数版]
    子组件<template><div></div></template><script>exportdefault{methods:{childEvent(_value){alert("我是子组件方法"+......
  • Vue 父组件调子组件方法[不参数版]
    子组件<template><div></div></template><script>exportdefault{methods:{childEvent(){alert("我是子组件方法");......
  • Vuex 持久化数据更新(vuex-persistedstate)
    在Vuex的使用过程中,会面临数据持久化问题,如:用户数据、菜单数据、必要的信息数据等。遇到问题:改变数据后F5刷新页面,数据不改变使用方式exportdefault{mounted......
  • 调用外部API --使用httpclient
    调用外部API --使用httpclienthttpclient请求不属于浏览器操作,跨域是浏览器的安全性,不需要跨域ajax是浏览器的操作,它需要进行设置跨域1、httpclient请求https.NETC#......
  • 面试官:vue2和vue3的区别有哪些?
    一、Vue3与Vue2区别详述1.生命周期对于生命周期来说,整体上变化不大,只是大部分生命周期钩子名称上+“on”,功能上是类似的。不过有一点需要注意,Vue3在组合式API(Comp......
  • 一份vue面试知识点梳理清单
    写过自定义指令吗原理是什么指令本质上是装饰器,是vue对HTML元素的扩展,给HTML元素增加自定义功能。vue编译DOM时,会找到指令对象,执行指令的相关方法。自定义指令......
  • 自定义组件
    创建自定义组件类似于页面,一个自定义组件由jsonwxmlwxssjs4个文件组成。要编写一个自定义组件,首先需要在json文件中进行自定义组件声明(将component字段设为true......
  • 自定义组件传参
    参数声明Component({//参数properties:{//这里定义了innerText属性,属性值可以在组件使用时指定innerText:{type:String,value:'def......
  • 自定义组件事件
    子组件<viewbindtap="onItemChildClick"data-item="item">{{item}}</view>Component({methods:{onItemChildClick(event){this.trigger......
  • Component name “home“ should always be multi-word.eslintvue/multi-word-compone
    原文链接:https://blog.csdn.net/m0_67676064/article/details/126861235vue刚创建完就报错Componentname“home“shouldalwaysbemulti-word.eslintvue/multi-word-c......