Vue $emit $refs子父组件间方法的调用

1、$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 id="app"><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>

2、$refs

父组件调用子组件的方法，可以传递数据
注意：子组件标签中的时间也不区分大小写要用“-”隔开

父组件：

<template><div id="app"><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>

子组件：

<template><button>点击我</button>
</template>
<script>export default {methods: {emitEvent(msg){console.log('接收的数据--------->'+msg)//接收的数据--------->我是父组件中的数据}}}
</script>

Vue $emit $refs子父组件间方法的调用相关推荐

vue子父组件间传值
父组件传值给子组件 props方式父组件上1处声明传递的键并赋值,子组件2处使用props接收一下这个键就可以使用了.在父组件改变这个值的话子组件跟着一起响应,子组件改变这个值的话父组件不改变.次为 ...
antd vue form表单子组件调用父组件的方法没反应_前几天推了Vue，今天给React疯狂打call...
在主流前端框架里,因为React的入门难度高而果断投入Vue怀抱的人绝不在少数.但我要告诉大家,如果你有一定的js基础,其实React没你想象中那么困难任何库都要在「概念简洁」(自由度高)和「使用便 ...
vue中组件之间调用方法——子组件调用父组件的方法父组件调用子组件的方法
vue中组件之间调用方法--子组件调用父组件的方法 & 父组件调用子组件的方法 1.vue中子组件调用父组件的方法 1.1.第一种方法是直接在子组件中通过this.$parent.event来 ...
父组件给子组件传值方法_【Vue】小学生都能看懂的子父组件传值
Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,其中之一就是组件的传值. 搭建的框架目录结构一.父传子动图效果及源码父传子源码: 父组件: 子组件: 二.子传父动 ...
子组件调用父组件中方法的方法
1.在子组件中用this.$parent.fn()来调用父组件的方法父组件中: <script>export default {methods: {parentFn() {console ...
uni-app 子组件调用父组件的方法（vue同样适用）
文章目录一.快速入门 1. 子组件 2. 父组件 3. 子组件回调父页面 4. 父组件接收回调 5. 组件调用流程一.快速入门 1. 子组件 <view @click='childBackH ...
Vue+TS+子组件回调父组件的方法
历史文章目录连接: https://blog.csdn.net/yy763496668/article/details/113117040 此链接为CSDN连接,目的为方便大家一览博客目录!内容会定期 ...
17.项目开发中遇到的问题（this.$parent.$parent子组件调父组件的父组件的方法不可用问题）
前言: 在今天的项目开发中,遇到了一个问题,就是通过this.$parent.$parent.getHostInf()无法去调用其父组件的父组件的方法(因为此时获取的不是其父组件,而是包含父组件的一个 ...
vue学习（1）vue3/2下的父子/爷孙组件间方法调用
我这里只写父子/爷孙组件间方法调用(传值的那啥emit,on, eventbus我就不在这里写了) vue2中的写法爷组件控制孙组件的锚点跳转(父子组件间方法调用类似) // 孙组件 <tem ...

Vue $emit $refs子父组件间方法的调用

1、$emit

2、$refs

Vue $emit $refs子父组件间方法的调用相关推荐

最新文章

热门文章