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

36次阅读

共计 674 个字符，预计需要花费 2 分钟才能阅读完成。

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)
点击当前：

正文完