【vue】子组件和父组件方法集合

哇哦Q

已于 2023-06-30 09:21:35 修改

阅读量455

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2023-06-30 09:15:38 首次发布

本文链接：https://blog.csdn.net/qxn530/article/details/131456256

版权

Vue 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

文章介绍了在Vue.js中，子组件如何调用父组件的方法并获取返回值，以及父组件调用子组件的多种方法，包括使用props、$refs、$emit和$on等。这些交互方式是Vue.js组件通信的基础和重要组成部分。

摘要由CSDN通过智能技术生成

1、子组件调用父组件的方法成功后，获取父组件返回的值

父组件

<FromHead  ref="FromHead" :List="List"  @sub="sub"  @closenew="closenew"></FromHead>


methods: {
    //i是子组件传递的参数，callback也是参数，只不是用回调函数作为参数
    sub(i, callback) {
       const res = await AddFromData({ ...this.newform });
          if (res.code === 200) {
            this.$notify({
              type: "success",
              position: "bottom-left",
              message: "暂存成功",
              duration: 2000,
              offset: 100,
            });
            callback(res.data);//执行作为参数的函数，传入值，子组件可获取
          }
    }

}

子组件

methods: {
    next() {
      this.$emit("sub", true, (val) => {
        this.AddData = val;//这里的val就是父组件返回的值
        if (this.AddData) {
          this.activeName = "second";
          GetBpmGroup2({ dataid: this.AddData }).then((res) => {
            this.changeArr = res.data.group;
          });
        }
      });
    },
}

2、子组件调用父组件

方法一：this.$parent.event

父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from './components/childcomponent';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

方法二：用“$emit”向父组件触发一个事件

父组件

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from './components/childcomponent'
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>

方法三：父组件把方法传入子组件中,在子组件里直接调用这个方法

父组件

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from './components/childcomponent';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('父组件方法');
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod()">点击按钮</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
          this.fatherMethod();
        }
      }
    }
  };
</script>

3、父组件调用子组件

方法一：通过ref

父组件

<template>
  <div @click="fatherMethod">
    <child ref="child"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child.vue';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {this.$refs.child.childMethods();
      }
    }
  };
</script>

子组件

<template>
  <div>{{name}}</div>
</template>
<script>
  export default {
    data() {
      return {
        name: '测试'
      };
    },
    methods: {
      childMethods() {
        console.log(this.name);
      }
    }
  };
</script>

方法二：$emit、$on

父组件

<template>
    <div>
        <Button @click="handleClick">点击调用子组件方法</Button>
        <Child ref="child"/>
    </div>
</template>    

<script>
import Child from './child';

export default {
    methods: {
        handleClick() {
               this.$refs.child.$emit("childmethod")    //子组件$on中的名字
        },
    },
}
</script>

子组件

<template>
    <div>我是子组件</div>
</template>
<script>
export default {
    mounted() {
        this.$nextTick(function() {
            this.$on('childmethods', function() {
                console.log('我是子组件方法');
            });
        });
     },
};
</script>