vue子组件向父组件传值的三种方式_vue子组件修改父组件值
2023-06-13 09:15:01 时间
大家好,又见面了,我是你们的朋友全栈君。
如需了解老子怎么控制儿子的,传送门:https://s-z-q.blog.csdn.net/article/details/119922715
子组件child.vue
<template>
<ul>
<li> <button @click=" $emit( 'emit', '方式1:传参给父组件第1个参数', '方式1:传参给父组件第2个参数', '...' ) " > 方式1:用$emit传参给父组件(推荐此方式) </button> </li> <br />
<li> <button @click=" emit( '方式2:传参给父组件第1个参数', '方式2:传参给父组件第2个参数', '...' ) " > 方式2:用props属性传进来的函数(方法Function)传递值给父组件 </button> </li> <br />
<li> <button @click=" $parent.emit( '方式3:传参给父组件第1个参数', '方式3:传参给父组件第2个参数', '...' ) " > 方式3:用$parent.functionName调用父组件的方法(不推荐,需要依赖父组件初始化完毕该方法) </button> </li> <br />
<li> <button @click=" inject_emit( '方式4:传参给父组件第1个参数', '方式4:传参给父组件第2个参数', '...' ) " > 方式4:用inject关联父组件provide的方法(这种方式比较生僻,子孙组件都可以直接调用,适用于层级较深的组件关系) </button> </li> <br />
<li> <button @click=" window_emit( '方式5:传参给父组件第1个参数', '方式5:传参给父组件第2个参数', '...' ) " > 方式5:用window的全局方法(此方式属于直男模式,呵呵~) </button> </li> <br />
</ul>
</template>
<script>
export default {
inject: ["inject_emit"], //注入方法(子孙组件均可直接调用)
props: ["emit"], //传入方法
methods: {
window_emit(v1,v2,v3){
window.emit(v1,v2,v3)
}
}
};
</script>
父组件father.vue
<template>
<div>
<child @emit="emit" :emit="emit"></child>
</div>
</template>
<script>
import child from "./child.vue";
export default {
components: {
child,
},
created() {
window.emit = this.emit;//声明全局方法(直男模式)
},
provide() {
return {
inject_emit: this.emit,//在这里对外提供方法,在子孙组件中都可以调用
};
},
methods: {
emit(v1, v2, v3) {
alert(`${v1}\n${v2}\n${v3}`); //弹出子组件的传参
},
},
};
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/186798.html原文链接:https://javaforall.cn
相关文章
- 熬夜整理的vue面试题,面试加油
- [ Vue ] vue 设计原理之响应式系统实现笔记( 二 )
- VUE父子组件之间的传值,以及兄弟组件之间的传值;
- Vue父子组件传值的方法[通俗易懂]
- vue组件化的理解_什么是前端组件化
- Vue03基础语法--Vue组件+样式绑定+修饰符+常用控件+自定义指令+自定义事件
- Vue 组件间的通信方式
- vue双向绑定失效_vue热更新失效
- Vue组件是怎样挂载的
- vue子组件调用父组件中方法的方式合集
- 总结了Vue组件通信方式,别再说不会组件通信了
- 记录第三天-Vue组件
- vue formdata请求_vue修改数据没有渲染到页面的原因
- jquery和vue冲突吗_jquery和vue的区别
- VUE组件封装_vue使用组件
- VUE组件封装_vue组件内部双向绑定
- vue子组件向父组件传值的三种方式_vue子组件改变父组件的值
- vue分页组件
- Vue 分页器组件[通俗易懂]
- vue常用组件库_vue内置组件
- Vue Drag and Drop
- 给 Vue 模态框组件添加过渡和动画效果
- Vue 组件间通信的几种方式
- Vue实现图片大图预览,v-viewer组件的使用方法演示
- vue模板语法{插值表达式}的用法
- vue.js客服系统实时聊天项目开发(二十二)vue项目中router.js路由介绍
- Vue组件
- 5. 「vue@2.6.11 源码分析」组件渲染之创建虚拟DOM
- 4. 「vue@2.6.11 源码分析」new Vue() 整体流程和组件渲染之前的准备工作
- Vue的beforeRouteEnter如何使用组件实例的方法
- vue.js入门篇之Vue.js 样式绑定
- Vue组件通讯详解编程语言
- vue 保持组件状态防止重新渲染 缓存组件失效详解编程语言
- Vue.js 与MySQL结合,打造高效Web应用程序(vue.js mysql)
- 优雅的Vue请求Redis驱动的高性能服务(vue请求redis)
- Vue如何连接Redis(vue怎么连接Redis)
- Vue操作Redis掌握前端数据管理利器(vue操作redis)
- 使用Vue从Redis获取数据(vue去redis取数据)