关于javascript:vue──子组件调用父组件的方法并传参-props

vue子组件调用父组件的办法并传参 通过props传参及调办法
父组件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>

子组件 form.vue

<template> <div @click = "sure('123')"> 点击 ----- {{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) // 如果要传参数间接在这里传递就好了          }        }      },  } </script>

成果展现：
点击以前：
![点击成果以前叶页面示img/bVcOQYp)
点击当前：