• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

vue──子组件调用父组件的方法并传参 — props

互联网 diligentman 4天前 3次浏览

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)
点击以后:vue──子组件调用父组件的方法并传参 --- props
vue──子组件调用父组件的方法并传参 --- props


程序员灯塔
转载请注明原文链接:vue──子组件调用父组件的方法并传参 — props
喜欢 (0)