Vue父子组件相互通讯方法总结

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

转载：https://juejin.im/post/5c1370365188250f73759a79
作者：Zero游戏人生
来源：掘金

子组件调用父组件的方法：

　　1、$emit

　　2、$parent

　　3、prop

　　4、vuex（dispatch: actions => commit:mutations）

$parent方法

父组件

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

子组件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
    methods: {
      activeBtn() {
        this.$parent.fatherMethod()
      }
    }
  }
</script>

$emit方法

父组件

<template>
  <div>
    <child @callFather="activeSon"></child>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('father组件');
      },
      activeSon(){
        this.fatherMethod()
      }
    }
  }
</script>

子组件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
    methods: {
      activeBtn() {
        this.$emit("callFather")
      }
    }
  }
</script>

prop方法

父组件

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

子组件

<template>
  <div @click="activeBtn"> </div>
</template>
<script>
  export default {
  props:{
    activeSon:  {
        type: Function,
        default: null
      }
  },
    methods: {
      activeBtn() {
        this.activeSon()
      }
    }
  }
</script>

父组件调用子组件中的方法、变量

通常使用$ref获取子组件的方法、变量（$ref也可以用于获取某个DOM）

父组件

 <component v-bind:is="userAdd" ref="addUser"></component>

import userAdd from "./components/edit";
export default {
  components: {
    userAdd
  },
  data() {
    return {
      userAdd: userAdd,
    };
  },
.....

    openNew() {
      // this.$refs.addUser.user.uType= 2;    // 调用子组件变量
      this.$refs.addUser.isEdit = false;    
      this.$refs.addUser.title = "新增用户";
      this.$refs.addUser.editDialog = true;
    },    ·

子组件

export default {
  data() {
    return {
      isEdit: false, // 是否为编辑状态，默认为false，即默认为新增
      formLabelWidth: "100px",
      editDialog: false,
      user: {
        uType: "2"
      },
      title: ""
    };
  },
......

例子：https://blog.csdn.net/qq_34664239/article/details/80386153

兄弟组件间传递DOM数据，调用函数

写一个兄弟组件之间传递数据，父组件调用方法的案例：
第一个子组件cartcont，发射数据

this.$emit('cartadd', event.target);

父组件接收数据，并将数据，通过调用另一个子组件shopcart 的方法传递给另一个子组件shopcart

<v-cartcont :food="food" @cartadd='_drop'></v-cartcont>
<v-shopcart ref='shopcart'></v-shopcart>
_drop(target){
    console.log('父组件接收数据')
    this.$refs.shopcart.drop(target);
}

shopcart子组件的方法

drop(el){
    console.log('调用另一个子组件的方法')
    console.log(el)
}

以上是 Vue父子组件相互通讯方法总结 的全部内容， 来源链接： utcz.com/z/376239.html

回到顶部