vue组件传值：从基础到进阶

已于 2023-09-01 11:22:44 修改
阅读量4.1k 收藏 25
点赞数 11
分类专栏： vue 文章标签： 前端 vue
于 2022-02-28 14:31:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Shids_/article/details/123181838
版权

前言

当我们使用 vue 开发时，组件是最基础和重要的概念之一。而组件之间的数据传递也是我们在开发过程中必须面对的问题之一。vue 提供了多种方式来实现组件之间的数据传递，比如 props、emit、parent、children 等等。但是不同的方式适用于不同的场景，我们需要根据实际需求选择最合适的方式来完成组件之间的数据传递。在本文中，我们将会详细介绍 vue 中组件传值的各种方法，并且结合实例代码来帮助大家更好地理解和应用。

实现思路

父子传值： 在父组件中给子组件标签上绑定一个属性， 属性上挂载需要传递的值，在子组件通过 props:['自定义属性名'] 来接收数据。

子父传值： 在子组件中自定义一个事件，调用这个事件后，子组件通过 this.$emit('自定义事件名',要传递的数据) 发送父组件可以监听的数据，最后父组件监听子组件事件，调用事件并接收传递过来的数据。

兄弟传值： 在第一个组件中使用 $bus 传递自定义方法或者参数，然后在另一个同级组件中通过 $on 接收传过来的方法和参数。

话不多说，下面进入实战

父子传值

本篇小实例主要是模拟父组件向子组件传递数据的情况。

  • 父组件 index.vue
<template>
  <!-- 父组件 -->
  <div>
    <Child :message="informtion"></Child>
  </div>
</template>

<script>
// 引入子组件
import Child from "./subassembly/seed.vue";
export default {
  data() {
    return {
      informtion: "传递给子组件的数据", //要传递给子组件的数据
    };
  },
  //一定要注册组件
  components: {
    Child,
  },
};
</script>
  • 子组件 seed.vue
<template>
  <!-- 子组件 -->
  <h2>我是子组件<br />接收父组件值：{{ value }}</h2>
</template>

<script>
export default {
  data() {
    return {
      value: "",//接收的值
    };
  },
  props: {
    // message用于接收
    message: {
      type: String, //验证类型，也可以验证其他类型
      default: "", //如果父组件传值，则用父组件的值渲染，反之使用默认值
    },
  },
  watch: {
    message: {
      handler(newName, oldName) {
        this.value = newName;
      },
      deep: true, //深度监听
      immediate: true, //首次绑定的时候，是否执行 handler
    },
  },
};
</script>

实现效果
在这里插入图片描述

子父传值

本篇小实例主要是模拟子组件向父组件传递数据的情况。

  • seed.vue 子组件
<template>
  <!-- 子组件 -->
  <button @click="seedOnclick">我是子组件的按钮</button>
</template>

<script>
export default {
  data() {
    return {
      seedCode: "Romantic never die!", //子传父要传递的值
    };
  },
  methods: {
    // 子组件事件方法
    seedOnclick() {
      this.$emit("seed", this.seedCode); //参数1：自定义事件  参数2：要传递的值
    },
  },
};
</script>
  • index.vue 父组件
<template>
  <!-- 父组件 -->
  <div>
    <Child @seed="seedAccept"></Child>
  </div>
</template>

<script>
// 引入子组件
import Child from "./subassembly/seed.vue";
export default {
  //一定要注册组件
  components: {
    Child,
  },
  methods: {
    seedAccept(data) {
      console.log(data, "子组件传给父组件的值");
    },
  },
};
</script>

实现效果

在这里插入图片描述

父组件如何调用子组件的方法？

1. $refs方法

在父组件中，通过 ref 直接调用子组件的方法。

  • 父组件
<template>
  <!-- 父组件 -->
  <div>
    <button @click="clickOn">我是父组件的按钮</button>
    <Child ref="child"></Child>
  </div>
</template>

<script>
import Child from "./subassembly/seed.vue";
export default {
  data() {
    return {};
  },
  components: {
    Child,
  },
  methods: {
    clickOn() {
      this.$refs.child.wayOn();
    },
  },
};
</script>
  • 子组件
<template>
  <!-- 子组件 -->
  <div>
    {{num}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    wayOn() {
      this.num += 5;
      console.log("父组件调用");
    },
  },
};
</script>

在这里插入图片描述

2. emit、on方法

在父组件中，通过组件的 $emit、$on 方法来调用。

  • 父组件
<template>
  <!-- 父组件 -->
  <div>
    <button @click="clickOn">我是父组件的按钮</button>
    <Child ref="child"></Child>
  </div>
</template>

<script>
import Child from "./subassembly/seed.vue";
export default {
  data() {
    return {};
  },
  components: {
    Child,
  },
  methods: {
    clickOn() {
      this.$refs.child.$emit("wayOn") 
    },
  },
};
</script>
  • 子组件
<template>
  <!-- 子组件 -->
  <div>
    {{num}}
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.$on("wayOn", () => {
        this.num += 5;
        console.log("父组件调用");
      });
    });
  },
};
</script>

在这里插入图片描述

子组件如何调用父组件的方法？

1. $parent方法

$parent 方法是直接在子组件中通过 this.$parent.event 调用父组件的方法，如下：

  • 父组件
<template>
  <div>
    <!-- 子组件标签 -->
    <child></child>
  </div>
</template>
<script>
import child from "./dialog/dialog"; //引入子组件
export default {
  components: {
    // 注册组件
    child,
  },
  methods: {
    //父组件方法
    parentMethod() {
      console.log("子组件点击后触发此方法");
    },
  },
};
</script>
  • 子组件
<template>
  <div>
    <button @click="childOnclick()">子组件点击事件</button>
  </div>
</template>
<script>
export default {
  methods: {
    // 子组件点击事件
    childOnclick() {
      // 通过$parent方法调用父组件方法
      this.$parent.parentMethod();
    },
  },
};
</script>

在这里插入图片描述

2. $emit方法

$emit 方法是在子组件里用 $emit 向父组件触发一个事件，父组件监听这个事件即可，如下：

  • 父组件
<template>
  <div>
    <!-- 子组件标签 -->
    <child @fatherMethod="parentMethod"></child>
  </div>
</template>
<script>
import child from "./dialog/dialog"; //引入子组件
export default {
  components: {
    // 注册组件
    child,
  },
  methods: {
    //父组件方法
    parentMethod() {
      console.log("子组件点击后触发此方法");
    },
  },
};
</script>
  • 子组件
<template>
  <div>
    <button @click="childOnclick()">子组件点击事件</button>
  </div>
</template>
<script>
export default {
  methods: {
    // 子组件点击事件
    childOnclick() {
      // 通过$emit方法调用父组件方法
      this.$emit("fatherMethod");
    },
  },
};
</script>

在这里插入图片描述

3. 将方法传入子组件中

简单来说就是在父组件把方法传入子组件内，然后再在子组件中调用这个方法，如下：

  • 父组件
<template>
  <div>
    <!-- fatherMethod 传递的方法-->
    <child :fatherMethod="parentMethod"></child>
  </div>
</template>
<script>
import child from "./dialog/dialog"; //引入子组件
export default {
  components: {
    // 注册组件
    child,
  },
  methods: {
    //父组件方法
    parentMethod() {
      console.log("子组件点击后触发此方法");
    },
  },
};
</script>
  • 子组件
<template>
  <div>
    <button @click="childOnclick()">子组件点击事件</button>
  </div>
</template>
<script>
export default {
  props: {
    fatherMethod: {
      type: Function, //验证类型，也可以验证其他类型
      default: null, //如果父组件传值，则用父组件的值渲染，反之使用默认值
    },
  },
  methods: {
    // 子组件点击事件
    childOnclick() {
      if (this.fatherMethod) {
        this.fatherMethod();
      }
    },
  },
};
</script>

在这里插入图片描述

兄弟传值

本篇小实例主要是模拟同级组件间传递数据及调用方法的情况。

1. 全局注册

1.1 安装

npm install --save vue-bus
cnpm install --save vue-bus

1.2 引入并注册

// main.js
import VueBus from 'vue-bus'
Vue.use(VueBus)

1.3 使用

  • seed.vue 子组件1
<template>
  <div>
    <h3>子组件1</h3>
    <el-button type="primary" size="mini" @click="firstly">点击传值</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "子组件1定义的变量",
    };
  },

  methods: {
    firstly() {
      // 传了一个自定义方法 getTargetPointBUS 和参数 this.message
      this.$bus.$emit("getTargetPointBUS", this.message);
    },
  },
};
</script>
  • sons.vue 子组件2
<template>
  <div>
    <h3>子组件2<br />接收子组件1的值：{{ message }}</h3>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
    };
  },
  mounted() {
    // 触发自定义方法 getTargetPointBUS，同时触发自身的方法 getTargetPoint
    this.$bus.on("getTargetPointBUS", (data) => {
      console.log(data, "子组件1传的值");
      this.message = data;
      this.getTargetPoint(data);
    });
  },
  //组件销毁接触事件绑定
  destroyed: function () {
    this.$bus.off("getTargetPointBUS");
  },
  methods: {
    // 触发方法
    getTargetPoint(data) {
      console.log("触发子组件2方法");
    },
  },
};
</script>
  • index.vue 父组件
<template>
  <!-- 父组件 -->
  <div>
    <Child></Child>
    <Electronic></Electronic>
  </div>
</template>

<script>
// 引入子组件
import Child from "./subassembly/seed.vue";
import Electronic from "./subassembly/sons.vue";
export default {
  //一定要注册组件
  components: {
    Child,
    Electronic,
  },
};
</script>

2. 局部注册

2.1 新建一个 eventBus.js 文件

import Vue from 'vue'
const eventBus = new Vue()
export default eventBus

2.2 在使用的组件中引入

import eventBus from "../eventBus";

2.3 使用

  • seed.vue 子组件1
<template>
  <div>
    <h3>子组件1</h3>
    <el-button type="primary" size="mini" @click="firstly">点击传值</el-button>
  </div>
</template>

<script>
import eventBus from "../eventBus";
export default {
  data() {
    return {
      message: "子组件1定义的变量",
    };
  },

  methods: {
    firstly() {
      // 传了一个自定义方法 getTargetPointBUS 和参数 this.message
      eventBus.$emit("getTargetPointBUS", this.message);
    },
  },
};
</script>
  • sons.vue 子组件2
<template>
  <div>
    <h3>子组件2<br />接收子组件1的值：{{ message }}</h3>
  </div>
</template>

<script>
import eventBus from "../eventBus";
export default {
  data() {
    return {
      message: "",
    };
  },
  mounted() {
  	// 触发自定义方法 getTargetPointBUS，同时触发自身的方法 getTargetPoint
    eventBus.$on("getTargetPointBUS", (data) => {
      console.log(data, "子组件1传的值");
      this.message = data;
      this.getTargetPoint(data);
    });
  },
  //组件销毁接触事件绑定
  destroyed: function () {
    eventBus.$off("getTargetPointBUS");
  },
  methods: {
    // 触发方法
    getTargetPoint(data) {
      console.log("触发子组件2方法");
    },
  },
};
</script>
  • index.vue 父组件
<template>
  <!-- 父组件 -->
  <div>
    <Child></Child>
    <Electronic></Electronic>
  </div>
</template>

<script>
// 引入子组件
import Child from "./subassembly/seed.vue";
import Electronic from "./subassembly/sons.vue";
export default {
  //一定要注册组件
  components: {
    Child,
    Electronic,
  },
};
</script>

实现效果
在这里插入图片描述

相关推荐

⭐ 从原理到实战：vue中的provide/inject让你的代码更优美

水星记_
关注
  • 11
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue组件传值
wangweiruning的博客
12-06 501
vue组件传值-------总结 1·父组件传值子组件 父组件通过   :paramsName1="params1" :paramsName2="params2"的方式将值传递给子组件 子组件通过    props接收参数     props{         paramsName1{             type:string,             default:"默认参数1"  ...
Vue 组件传值几种常用方法【总结】
08-27
本文是脚本之家小编给大家整理的vue组件传值几种常用方法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue组件传值的六种方法
最新发布
li826827的博客
05-24 376
父子组件通信: props；ref；兄弟组件通信: eventBus；vuex跨级通信: eventBus；Vuex；
vue 组件传值
m0_59070120的博客
03-30 610
1，父组件通过标签上:data=data方式定义传值，子组件通过props方法接受数据 2，祖先组件provide，后代组件inject接受 // 父级组件提供 'foo' var Provider = { provide: { foo: 'bar' }, // ... } // 子组件注入 'foo' var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ... } 3，$refs,
vue学习笔记（二）——字符组件传值
在路上
08-29 313
1、子组件向父组件传值、 vue中splice和$emit使用：https://blog.csdn.net/BlackPlus28/article/details/100136811 <body> <div id="app"> <!-- v-model 数据双向绑定 --> ...
解决vue组件props传值对象获取不到的问题
10-16
主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue 组件间传值及事件触发Demo
09-07
总结：Vue组件间传值和事件触发是构建可复用、可维护应用的基础。通过`props`、`v-model`、`$emit`、`Vuex`等手段，我们可以有效地管理组件间的数据流动，同时通过自定义事件和事件回调实现组件间的交互。理解并熟练...
Vue父子组件传值的一些坑
10-14
本文将深入探讨Vue父子组件传值时可能遇到的问题，以及如何解决这些问题，同时还会涉及到JavaScript中的深拷贝和浅拷贝概念。 1. 问题描述： 在Vue中，当你从父组件向子组件传递一个对象时，如果子组件直接修改了这...
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
vue组件传值的几种方式
k393393的博客
11-27 5364
一、父子组件、非父组件传值 1、父组件向子组件传值 父组件向子组件传值就是通过在父组件中让子组件标签绑定父组件的数据，子组件的props接收父组件穿过来的值即可 父组件 子组件 2、子组件向父组件传值 子传父的实现方式就是用了 this.emit来遍历getData事件，首先用按钮来触发setData事件，在setData中用this.emit 来遍历 getData 事件，首先用按钮来触...
Vue组件传值示例
宁静致远
08-24 414
目录 vue常用组件通讯方式 组件通讯示例 props 父传子 $emit/$on 子传父子传父 .sync语法糖 vue常用组件通讯方式 vue也是组件化开发框架,对于这种组件化开发来说,组件之间的通信方式通常都是非常重要的 1.props 2.$emit/$on 3.$children/$parent 4.$attrs / $listeners 5.ref 6.$root 7.eventBus 8.vuex 组件通讯示例 props 父传子 1.父组件以属性的方式传值给子组件
Vue的组件传值详解
学习学习学习
07-11 573
Vue组件的传值操作 读者原本想写的仔细一点点，但是因为时间匆忙，所以内容就稍微精简一点。 因为在使用的时候需要用到组件的传值操作。 组件传值的作用：使代码具有更好的可维护性，让语言更加简洁，便于修改。 组件的传值分为两种类型： 1、数组传值 代码举例： 组件： 组件通过props进行传值，数组传值. 在组件javascript内部可以通过this.索引名进行调用 在&l...
组件之间的通信
Lily-HU
09-07 134
1、父子组件通信 ####1.1父组件到子组件 方式：通过 props 属性传递数据 注意：子组件无法直接使用父组件的数据 //============= 父组件 ================= <aaa :money="bar"></aaa> important aaa from '......' var vm = new Vue({ el: '#app...
vue中组件传值的五种方式
weixin_46052938的博客
07-30 1848
vue组件传值的五种方式 方法一 props传参 父组件 <template> <div class="container"> <div>我是父组件</div> <Son str="字符串" :num="5" :obj="{ name: '对象信息' }" :func="() => {this.list()}" :arr="arr" ></S
Vue组件传值的三种方法
qq_52788454的博客
06-29 1618
Vue组件传值的三种方式 1、父传子 父传子使用props： 1、父组件：即在使用的子组件标签上，自定义一个绑定数据，这里我使用的是“mymsg”，将父组件的msg绑定在其上。 2、子组件：在props属性中：声明一个“mymsg”，这个是和父组件在子组件标签上自定义的名称是一样的，type是数据类型，default是自身默认值 3、子组件：在需要用到的地方直接引用“mymsg” 结果为: 2、子传父 子传父：使用this.$emit('事件名',参数1,参数2,......) 过程： 父组件：在
vue组件通信传参方式
chenzihong123的博客
01-04 365
vue组件传参包括父组件向组件传参，子组件向父组件传参，组件之间传参这三种 子组件向父组件传参 子组件向父组件传参，通过定义参数的方式传递参数 1.在组件中动态绑定（如果只想传递一个静态的prop ，可以不绑定，如下）要传递的数据 2.在子组件中使用 props 选项去接收来自父组件传递过来的数据 完整代码如下 //父组件 <child :msg= "'这里是你要传给子组件的数据'" cla...
vue组件传值获取不到
05-01
在Vue中，组件之间的数据传递是非常重要的。Vue组件传值可以通过props和$emit来实现。如果你在Vue组件中传值，但无法获取到，可以从以下几个方面来考虑： 1. 是否正确地设置了props属性 首先，需要检查是否正确地设置了props属性。在父组件中，通过在子组件上定义props属性，可以将数据传递给子组件。在子组件中，它可以通过props来接收这些数据。需要检查传递的数据名称和类型是否与子组件中定义的props匹配，以及是否设置了默认值。 2. 是否正确地使用$emit方法 当向父组件传输数据时，可以使用$emit方法来触发一个事件。在子组件中使用$emit方法，将需要通过$emit的事件名称和需要传递的数据作为参数传递。在父组件中，通过在子组件上定义的事件名称，来无法接收事件。 3. 是否正确地绑定数据 在Vue中，可以使用v-bind指令将父组件中的属性绑定到子组件上。如果这个绑定没有正确完成，就无法在子组件中获取到属性。可以检查是否正确地使用了v-bind，属性名称是否与子组件中的名称相匹配。 如果以上几个方面都没有问题，可以尝试在Vue开发者工具中检查组件的数据，找出引起问题的原因。确保正确地设置和使用Vue组件传值，可以使组件之间的数据传递更加可靠和有效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值