Vue 父子组件传值

~浮生

已于 2023-04-29 09:59:14 修改

阅读量1.2k

点赞数 1

文章标签： vue.js javascript 前端 html

于 2023-04-29 09:57:37 首次发布

本文链接：https://blog.csdn.net/weixin_73202205/article/details/130438421

版权

项目中往往会把一些常用的公共代码抽离出来，写成一个子组件。或者在一个页面中的代码太多，可以根据功能的不同抽离出相关代码写成子组件，这样代码结构会更加简洁明了，后续维护更加方便。应用组件的时候就会涉及到组件之间相互传递参数以下进行简单的介绍,vue中的父子组件传值，要注意的是遵守单向数据流原则。所谓单向数据流原则，简单的说就是父组件的数据可以传递给子组件，子组件也可以正常获取并使用由父组件传过来的数据；但是，子组件中不能直接修改父组件传过来的数据，必须要向父组件传递一个事件来父组件需要修改数据，即通过子组件的操作，在父组件中修改数据；这就是单项数据流。

children 在父组件直接使用进行打印

parent 在子组件进行调用打印

Vue父子传值的方法

在Vue项目进行父子传值主要有以下三种方法：

1. props / $emit

2. $ref

3. $parent / children

1.props / $emit

⼦组件中通过定义props接收⽗组件中通过v-bind绑定的数据

父传子

首先在父组件中定义一个data数据

import ChildGroup from "./ChildGroup.vue";// 引入组件
export default {
  components: {
    ChildGroup,// 注册组件
  },
  data() {
    return {
      Text: 111111111111,// 需要传递的值
      Text2: 22222222222,// 需要传递的值
    };
  },
};

在父组件中使用子组件时用 v-bind 定义一个属性并将父组件的 Text Text2 传入

<ChildGroup :Text="Text" :Text2="Text2"/>

在子组件中使用props接收传入的属性，并可以直接使用

<template>
  <div>
    <h2>子组件</h2>
    <div>传递的值:</div>
    <div>{{ Text }}</div>
    <div>{{ Text2 }}</div>
  </div>
</template>

<script>
export default {
  props: {
    Text: {// 接收的名称
      type: Object, //接受类型
      default: {}, //默认值
    },
    Text2: {
      type: String,
      default: {},
    },
  },
};
</script>

父组件传入子组件的值就被显示出来了:

子传父

首先在子组件中定义一个事件，并且使用emit发送给父组件，在子组件使用的click事件触发发送自定义事件

<template>
  <div>
    <h2>子组件</h2>
    <button @click="childadd">子传父</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: 666666666,
    };
  },
  methods: {
    childadd() {
        // this.$emit(‘自定义事件名’,所需要传递的值)
      this.$emit("childadd", this.list);
    },
  },
};
</script>

在父组件中需要定义方法接受自定义事件 :

<template>
  <div class="home">
    <h1>父组件</h1>
    ---------------------------------------------------------------
    <ChildGroup @childadd="childadd" />
  </div>
</template>

<script>
import ChildGroup from "./ChildGroup.vue";
export default {
  name: "AsdHomeView",
  components: {
    ChildGroup,
  },
  methods: {
    childadd(val) {
      console.log(val);
    },
  },
};
</script>