首页
   /       /   
vue父子组件通信
11月
23
vue父子组件通信
作者:大彭Sir    分类: 学习笔记

Vue如何实现父子组件之间的通信功能

在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件。无论哪种组织方式父子组件的通信方式都是大同小异。

父传子

在父组件中,用 v-bind 动态绑定一个自定义属性,用于给子组件传递数据

<template>
  <div>
    <child :users="user"></child>
  </div>
</template>

<script>
import { child } from "./child";
export default {
  components: { child },
  data() {
    return {
      user: '张三'
    };
  }
};
</script>

在子组件中,使用 props 接收父组件传过来的数据。

<template>
  <div>{{ users }}</div>
</template>

<script>
export default {
  props: ["users"]
};
</script>

子传父

子组件通过事件的方式,利用 $emit 给父组件传值。

注意:$emit 的第一个参数是父组件自定义事件的方法名,后边的 “value” 是子组件要给父组件传递的数据

<template>
  <div>
    <button @click="datas"></button>
  </div>
</template>

<script>
export default {
  methods: {
    datas() {
      this.$emit("info", value);
    }
  }
};
</script>

在父组件中,绑定一个自定义事件,用来接收子组件传来的值;

<template>
  <div>
    <child @info="getInfo"></child>
  </div>
</template>

<script>
import { child } from "./child";
export default {
  components: { child },
  methods: {
    getInfo(value) {
      // value 就是子组件传递过来的数据
    }
  }
};
</script>

原文:https://blog.csdn.net/weixin_47013351/article/details/124335003

本文标签: VUE 组件
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录