Vue -- the child component calls the method of the parent component and passes parameters --- props

Alone 2021-02-22 22:25:58
vue child component calls method


vue The child component calls the method of the parent component and passes parameters adopt props Method of parameter transfer and adjustment
Parent component index.vue

<template>
<div>
<Form :setBillDetail="setBillDetail" :vals= "vals" />
{{vals.name}}
</div>
</template>
<script>
import Form from '../form.vue'
export default {
components:{
Form
},
data(){
return {
vals:{
name:"aaa"
}
}
},
methods:{
setBillDetail(val){
console.log(val.name)
this.vals = val
},
}
}
</script>

Child components form.vue

<template>
<div @click = "sure('123')">
Click on ----- {{vals.name}}
</div>
</template>
<script>
export default{
name:"Form",
props:{
setBillDetail: {
type: Function,
default: null,
},
vals:{
type:Object,
required:true
}
},
methods: {
sure(val){
if (this.setBillDetail) {
this.vals.name = val
this.setBillDetail(this.vals) // If you want to pass parameters, just pass them here
}
}
},
}
</script>

Effect display :
Click before :
![ Click on the effect page to show img/bVcOQYp)
After clicking : Click on the page to show
 Click to output the modified value

版权声明
本文为[Alone]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210222120810713k.html

  1. vue.js项目win10 npm install的时候报错
  2. springboot 开启http2
  3. Vue事件总线(EventBus)
  4. jQuery EasyUI使用教程:自定义数据网格分页
  5. 使用OkHttp和OkHttpGo获取OneNET云平台数据
  6. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
  7. Python belongs to back-end development or front-end development? Introduction to Python!
  8. HTTP 1.x 学习笔记 —— Web 性能权威指南
  9. Vue3组件(九)Vue + element-Plus + json = 动态渲染的表单控件
  10. HTTP 1.x 学习笔记 —— Web 性能权威指南
  11. Javascript中的事件冒泡与捕获
  12. The root element is missing 解决方法
  13. Javascript中的事件冒泡与捕获
  14. 010_ HTML5
  15. 020_ CSS3
  16. 030_ JavaScript
  17. Anti shake and throttling and corresponding react hooks package
  18. Using CSS in JS in svelte
  19. Pure CSS free website with dark mode switching function
  20. Front end interview daily 3 + 1 - day 678
  21. How to insert an element into the specified index of an array?
  22. 配置证书使得ngnix能够发布https的可信网站
  23. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  24. 前端url链接带的参数加密
  25. HTTP接口调试利器!4.8万Star的HTTP命令行客户端!
  26. Is react server components OK?
  27. Summary of front end basic knowledge (4) - webpack
  28. Sass nesting rule
  29. 前端三大框架:数据绑定与数据流
  30. axios 源码阅读(一)--探究基础能力的实现
  31. Javascript中的事件冒泡与捕获
  32. #研发解决方案#易车前端监控系统
  33. 【JS】877- 35 个 JavaScript 的奇葩知识,长见识了!
  34. #研发解决方案#易车前端监控系统
  35. 高性能 Nginx HTTPS 调优 - 如何为 HTTPS 提速 30%
  36. Front end, school recruitment, Taobao, guide
  37. Front end, social recruitment, Taobao, guide
  38. javascript 十大经典排序
  39. Draw a mellow cactus with the boneless technique of Meticulous Brushwork
  40. HTTP 1.x 學習筆記 —— Web 效能權威指南
  41. Vue3元件(九)Vue + element-Plus + json = 動態渲染的表單控制元件
  42. 我的 HTTP/1.1 好慢啊!
  43. Vue為何採用非同步渲染
  44. The response status was 0. Check out the W3C XMLHttpRequest Level 2 spec for
  45. Front end monastery
  46. How to quickly understand a new front end project?
  47. webpack4.X核心工具库之tapable实例对象Hook
  48. webpack4.X核心工具库之tapable实例对象Hook
  49. C++使用libcurl进行http通讯
  50. Can be directly used in HTML special character table Unicode character set
  51. C++使用libcurl进行http通讯
  52. Java traverses list < string > and takes out the string elements in it, and splices them with ","
  53. Self taught web front end more than two months, talk about my harvest and progress, learning summary
  54. vue 中使用 css 变量
  55. 深入了解React中state和props的更新
  56. 百度分享不支持https的解决方案
  57. [practical] ABAP mail sending (HTML + attachment)
  58. [practical] ABAP mail sending (HTML + attachment)
  59. Teach you how to select products with less profit and competition in Amazon Product Development (1)
  60. 【微前端】微前端最终章-qiankun指南以及微前端整体探索