vue两个子组件之间的传值

最新推荐文章于 2025-03-31 21:44:51 发布
最新推荐文章于 2025-03-31 21:44:51 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： 初级前端 自用 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44281416/article/details/109715160
版权

两个子组件之间传值，最好使用一个中间桥梁父组件来进行传值。
子组件1—>父组件—>子组件2
本例想实现的功能：把子组件1中的status传递到子组件2

子组件1：

    <el-table
      :header-cell-style="{ background: '#3A5FA6', color: '#fff', fontWeight: 'bold' }"
      :data="tableData"
      stripe
      height="770px"
      :cellStyle="cellStyle"
      style="width:100%;"
      highlight-current-row
      @current-change="currentChange"
    >
      <el-table-column prop="no" label="序号" width="50px"></el-table-column>
      <el-table-column label="设备类型">
        <template slot-scope="scope">
          <span :style="scope.row.status == '0' ? 'color:yellow' : 'color:green'">{{ scope.row.controlMethod }}</span>
        </template>
      </el-table-column>
   </el-table>

  methods: {
    currentChange(currentRow) {
      this.$emit('openFacilityAssetDetail', currentRow)
    }
    }

父组件：

<!--引子组件1-->
  <div class="strategy-info facilityAsset" v-if="facilityAsset">
    <FacilityAsset @openFacilityAssetDetail="openFacilityAssetDetail"> </FacilityAsset>
  </div>

<!--引子组件2-->
  <div class="strategy-info facilityAssetDetail" v-if="facilityAssetDetail">
    <FacilityAssetDetail :status="status" @viewFacilityAsset="viewFacilityAsset" @addFacilityAsset="addFacilityAsset"></FacilityAssetDetail>
  </div>

openFacilityAssetDetail(param) {
  //console.log(param)
  this.status = param.status//从子组件1中引来的参数
  this.facilityAssetDetail = true
}

子组件2

  <el-button type="primary" size="medium" @click="viewData" v-if="status == '1'">查看工单</el-button>
  <el-button type="primary" size="medium" @click="createData" v-else-if="status == '0'">创建工单</el-button>
  export default {
  props: {
    status: {
      type: String,
    },
  },
vue3 两个组件之间传值
A18937260063的博客
07-11 620
vue3 两个组件之间传值
vue2.x 组件之间传值
weixin_45757134的博客
06-02 728
文章目录前言一、父传子1.父组件传值给子组件1.父组件传值2.子组件接收1.接收2.校验。3.添加默认值4.总结2.父组件操作子组件二、子传父1.子组件传值给父组件2.父组件接收子组件的值2.子组件操作父组件三、兄弟组件之间传值四、其他关系组件之间传值 前言 vue组件之间传值的意义，是为了更好的达到组件复用。写更少的代码，实现页面更简洁、更高效、更复用。 一、父传子 1.父组件传值给子组件 1.父组件传值 <banner :img="img" /> data(){ return.
Vue——两个子组件之间的传值
qq_43201350的博客
07-13 694
Vue——两个子组件之间的传
两个子组件之间的传值
qq_43371287的博客
06-03 4881
举例：将A的drawerStart数值传递给B,来决定B的某个样式是否显示,并且点击 @click="changerDrawerStart"会改变 drawerStart的数值（这里可以使用监听watch，监听drawerStart的改变），通过$emit方法来实现传参的方式 组件A代码： 思路：如果两个子组件在同一个父组件上，可以将父组件作为一个桥梁(用一个中间值)，中间商，先将决定性元素的子组...
Vue 3 中组件数据传递
qq_44136028的博客
03-31 450
通过 props 将数据从父组件传递到子组件。// 父组件：parent.vue。// 父组件：parent.vue。子组件：base-son.vue。子组件：base-son.vue。父组件：parent.vue。
两个子组件直接传值
北枫林
01-19 660
创建一个文件Eventbus.js： import Vue from "vue" export default new Vue() 发送的组件： import Eventbus from '../util/Eventbus'//引用文件 Eventbus.$emit("path",this.path) //使用，第一个参数是自定义的参数名字，第二个参数是要传递的值 接受的组件： import Eventbus from '../util/Eventbus' //引用 Eventbus.$o
vue 子组件与子组件之间传参
warrah 南极狼
12-22 4459
封装可以让整体程序看起来很优雅，但有些问题需要解决，当然这些问题解决之后，开发效率自然就上去了，我的目标就是高效，然后能准点下班。靠时间换取金钱，意义不大。 子组件与子组件之间是不能直接传值的，需要凭借父组件，这个也非常容易理解。 1 子组件向父组件传参 查询条件子组件，显示格局条件，如果超过8个，则显示下拉菜单， 子组件通过this.$emit("addCond",item)传参，即子组件可以使用 $emit 触发父组件的自定义事件 <template> <div>
Vue2.0子同级组件之间数据交互
热门推荐
jq_smile博客
07-23 4万+
熟悉了Vue.js的同级组件之间通信，写此文章，以便记录。 Vue是一个轻量级的渐进式框架，对于它的一些特性和优点，请在官网上进行查看，不再赘述。 使用NPM及相关命令行工具初始化的Vue工程，目录结构如下 接着我们进入Demo，首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些
Vue非父子组件之间传值
01-08
例如，如果你有两个`child`组件，每个组件都会在`mounted`阶段监听`change`事件。这就是为什么在示例中提到的“每点击一次就会触发两次事件”的原因——因为有两个`child`组件都在监听同一个事件。 现在，当你在...
vue父组件向子组件动态传值的两种方法
08-28
在 Vue 中，父组件向子组件传值是非常常见的场景。在本文中，我们将介绍两种方法来实现父组件向子组件动态传值。 方法一：使用 Props 传值 在 Vue 中，我们可以使用 props 将数据从父组件传递给子组件。 props 是...
vue 子组件向父组件传值方法
08-27
这个过程通常分为两个步骤： 1. **子组件触发事件**：在子组件中，我们可以通过`this.$emit`方法触发一个自定义事件，并可以传递参数。例如，在子组件`component-a`中，我们有一个按钮，当点击时，会触发名为`child...
03-02-Vue组件之间的传值
weixin_48053866的博客
05-21 1162
我们接着上一篇文章03-01-Vue组件的定义和注册来讲。父组件子组件互相传值
Vue 之 组件之间的传值通信（多种方法，简洁而不失重点）
zhuang的博客
04-19 1292
Vue 之 组件之间的传值通信 子组件使用父组件的数据、方法； 父组件使用子组件的数据、方法；
记: 利用VueX 实现子组件之间传值
weixin_39891473的博客
03-01 806
需求: A,B两个子页面 点击A页面中table表格中的某行内的button, 获取该行内的信息"ID", 并将该id 传送至B页面,并渲染在页面上. 思路: 获取id > 利用Vuex 将id存到state中 > 在B页面接收id,并渲染到页面 第一步: 先获取table中改行的id ,我用的是element-ui. 利用插槽的方式lot-scope.上代码: <template slot-scope="scope"> <el-button styl
Vue 组件间进行传值
Mqyyy的博客
03-31 184
同样需要引入eventbus，使用 .$on来接收数据，第一个参数名为 发送数据时定义的名字，第二个参数为一个参数，函数的参数就是需要接收的值。引入eventbus，传数据一方使用 .$emit，第一个参数为自定义的事件名，第二个参数为需要传递的数据。对象形式的需要传入数据的数据类型。第一个msg自定义，随意命名，父组件用什么名字传，子组件就用什么名字来接。通过 $emit 传入两个参数，第一个是自定义事件名，第二个是需要传走的值。在组件中通过一个函数来接收，自组件传递过来的值作为这个函数的参数来接收。
vue组件之间传值
GikQxx21_wen的博客
01-31 157
vue组件之间传值
vue2组件之间传值（数据共享）
cn33333的博客
11-09 5873
父组件中使用子组件时，直接绑定属性，将要传递的值通过该属性传递给子组件。
Vue组件之间的数据通信（子组件传父组件，兄弟组件）
shiqifei的博客
05-16 1282
App.vue 父组件< template > < div > < h1 class = " title " > {{ title + ' ' } 学生姓名：{{ studentName }}
vue 组件之间相互传值的6种方法
一步一个脚印，踏实努力，向着目标前进
01-28 1万+
优点实现了数据从子组件向父组件的传递，遵循响应式设计原则。缺点只能实现相邻组件之间的通信，对于多层级嵌套组件间的通信较为复杂。如果组件间交互复杂，可能会导致大量自定义事件的使用，影响代码可读性和可维护性。
vue3 自定义组件之间传值
最新发布
04-29
### Vue3 中自定义组件间传值的方法 在 Vue3 中，父子组件间的传值主要依赖于 `props` 和 `$emit` 方法；而兄弟组件或跨级组件之间的通信则通常通过事件总线、Provide/Inject 或 Vuex 等状态管理工具来实现。以下是详细的介绍和示例。 #### 1. **父组件向子组件传值** 父组件可以通过 `props` 将数据传递给子组件。子组件接收这些数据并通过模板渲染出来。 ```html <!-- 父组件 --> <template> <div> <ChildComponent :message="parentMessage" /> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent component' }; } }; </script> ``` 子组件需要声明接受的 `props`： ```html <!-- 子组件 --> <template> <div>接收到的消息: {{ message }}</div> </template> <script setup> defineProps(['message']); </script> ``` 这种方法适用于简单的父子组件通信[^3]。 --- #### 2. **子组件向父组件传值** 子组件可以通过 `$emit` 向父组件发送事件，并携带参数。父组件监听该事件即可获取子组件的数据。 ```html <!-- 子组件 --> <template> <button @click="sendDataToParent">点击我向父组件发消息</button> </template> <script setup> const emit = defineEmits(['childEvent']); function sendDataToParent() { emit('childEvent', '这是来自子组件的消息'); } </script> ``` 父组件监听子组件发出的事件： ```html <!-- 父组件 --> <template> <div> <ChildComponent @childEvent="handleChildEvent" /> <p>从子组件接收到的消息: {{ childMessage }}</p> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { childMessage: '' }; }, methods: { handleChildEvent(message) { this.childMessage = message; } } }; </script> ``` 这种方式适合处理单向数据流中的回调需求[^2]。 --- #### 3. **双向绑定（v-model 增强）** Vue3 支持更灵活的 `v-model` 组件绑定方式，允许指定多个模型字段。 ```html <!-- 父组件 --> <template> <Child v-model:username="user.name" v-model:age="user.age" /> </template> <script> import Child from './Child.vue'; export default { components: { Child }, data() { return { user: { name: 'John Doe', age: 25 } }; } }; </script> ``` 子组件需定义对应的 `props` 和 `emits`： ```html <!-- 子组件 --> <template> <div> 用户名：<input type="text" :value="username" @input="updateUsername($event)" /><br/> 年龄：<input type="number" :value="age" @input="updateAge($event)" /> </div> </template> <script setup> const props = defineProps(['username', 'age']); const emit = defineEmits(['update:username', 'update:age']); function updateUsername(event) { emit('update:username', event.target.value); } function updateAge(event) { emit('update:age', Number(event.target.value)); } </script> ``` 这种模式特别适合表单类交互场景[^4]。 --- #### 4. **跨级组件通信（Provide/Inject）** 当涉及祖孙关系或多层嵌套时，可以使用 `provide/inject` 提供一种轻量级的状态共享方案。 ##### Provide 方式： ```javascript // 祖先组件 <script setup> import { provide, ref } from 'vue'; const sharedState = ref('祖先组件提供的数据'); provide('sharedKey', sharedState); </script> ``` ##### Inject 方式： ```javascript // 孙子组件 <script setup> import { inject } from 'vue'; const sharedState = inject('sharedKey'); // 获取祖先组件提供的数据 </script> ``` 此方法不破坏组件封装性的同时实现了深层次通信[^4]。 --- #### 5. **兄弟组件通信（事件总线或其他工具）** 如果两个无直接关联的组件需要相互通信，推荐使用第三方库如 Pinia/Vuex 或者手动创建一个事件中心。 简单例子如下： ```javascript // 创建事件总线 const bus = new Vue(); // 发送事件 bus.$emit('eventName', payload); // 接收事件 bus.$on('eventName', callbackFunction); ``` 现代开发建议优先采用集中化状态管理模式替代传统事件总线[^4]。 --- ### 总结 以上介绍了几种常见的 Vue3 自定义组件间传值的方式及其适用范围，开发者应根据具体业务需求选取最合适的策略。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值