Vue传值--三种常用传值

本文介绍Vue中组件间的通信方式,包括父组件向子组件传递数据、子组件向父组件发送事件及非父子组件间的通信技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

总结

  • 父组件传值给子组件,首先父组件发送的形式是用bind(用缩写:)绑定值到子组件身上。然后子组件用属性props接收。
  • 子组件传值父组件,首先是子组件发送的形式是this.$emit(事件名,需要发送的值),事件名:父组件on监听的方法,父组件第一件事就是监听子组件发送过来的事件名,@事件名=获取值的方法。获取值的方法(值)*,就这样拿到了儿子发过来的值
  • 兄弟传值,两个都要引入公共js->bus。首先是发送者,this.$emit(名字,值)。然后是接受者,this.$on("传过来的那个名字",函数(值)),这里要注意的是接受者的这个监听事件应该是放在钩子mounted事件内。同时注意this指向问题。(可用封装方法)

父组件向子组件进行传值:

父组件:
        <template>
      <div>
        父组件:
        <input type="text" v-model="name">
        <br>
        <br>
        <!-- 引入子组件 -->
        <child :inputName="name"></child>
      </div>
    </template>
    <script>
      import child from './child'
      export default {
        components: {
          child
        },
        data () {
          return {
            name: ''
          }
        }
      }
    </script>
子组件:
    <template>
      <div>
        子组件:
        <span>{{inputName}}</span>
      </div>
    </template>
    <script>
      export default {
        // 接受父组件的值
        props: {
          inputName: String,
          required: true
        }
      }
    </script>
    

子组件向父组件传值

子组件:
       <template>
          <div>
            子组件:
            <span>{{childValue}}</span>
            <!-- 定义一个子组件传值的方法 -->
            <input type="button" value="点击触发" @click="childClick">
          </div>
        </template>
        <script>
          export default {
            data () {
              return {
                childValue: '我是子组件的数据'
              }
            },
            methods: {
              childClick () {
                // childByValue是在父组件on监听的方法
                // 第二个参数this.childValue是需要传的值
                this.$emit('childByValue', this.childValue)
              }
            }
          }
        </script>  

####父组件:

  <template>
  <div>
    父组件:
    <span>{{name}}</span>
    <br>
    <br>
    <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
    <child v-on:childByValue="childByValue"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      childByValue: function (childValue) {
        // childValue就是子组件传过来的值
        this.name = childValue
      }
    }
  }
</script>

非父子组件进行传值。

(非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。)

公共bus.js
//bus.js
import Vue from 'vue'
export default new Vue()

组件A:
A组件:
<template>
  <div>
    A组件:
    <span>{{elementValue}}</span>
    <input type="button" value="点击触发" @click="elementByValue">
  </div>
</template>
<script>
  // 引入公共的bug,来做为中间传达的工具
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elementValue: 4
      }
    },
    methods: {
      elementByValue: function () {
        Bus.$emit('val', this.elementValue)
      }
    }
  }
</script>

组件B:
    <template>
      <div>
        B组件:
        <input type="button" value="点击触发" @click="getData">
        <span>{{name}}</span>
      </div>
    </template>
    <script>
      import Bus from './bus.js'
      export default {
        data () {
          return {
            name: 0
          }
        },
        mounted: function () {
          var vm = this
          // 用$on事件来接收参数
          Bus.$on('val', (data) => {
            console.log(data)
            vm.name = data
          })
        },
        methods: {
          getData: function () {
            this.name++
          }
        }
      }
    </script>
<think>好的,我现在需要帮助用户了解Vue2中组件间的方法与实现。首先,我得回忆一下Vue2的各种方式,并确保自己理解正确。常见的方式包括props/$emit、事件总线(Event Bus)、Vuex、$parent/$children、$attrs/$listeners,以及provide/inject等。不过用户可能更关注常用的几种,比如父子组件、兄弟组件和跨层级组件之间的。 接下来,我需要整理这些方法的适用场景和具体实现步骤。例如,父子组件通常用props和$emit,兄弟组件可能需要事件总线或Vuex,而跨层级则可能用provide/inject或者Vuex。需要为每种方法提供代码示例,这样用户能更直观地理解。同时,要注意用户可能对某些概念不太熟悉,比如事件总线的工作原理,需要简明地解释。 用户的问题中提到之前有一个引用是关于Vue2和Vue3兄弟组件的,虽然用户现在只关注Vue2,但可能需要强调在Vue2中的方法,比如事件总线,而Vue3可能有所不同。不过当前问题仅限于Vue2,所以重点放在Vue2的解决方案上。 另外,用户要求生成相关问题,我需要考虑用户可能的后续疑问,比如各种方法的优缺点,如何选择适合的方法,或者如何处理复杂场景下的数据递。这有助于用户深入学习和解决问题。 需要确保回答结构清晰,分点列出每种方式,包括适用场景、实现步骤和代码示例。同时,语言要简洁,避免过于技术化的术语,让新手也能理解。最后,生成的相关问题要覆盖常见疑问,帮助用户进一步探索。</think># Vue2组件间方法详解 ## 一、父子组件 ### 1. props向下 ```javascript // 父组件 <child-component :message="parentMsg"></child-component> // 子组件 export default { props: ['message'] } ``` ### 2. $emit向上 ```javascript // 子组件 this.$emit('update', data); // 父组件 <child-component @update="handleUpdate"></child-component> methods: { handleUpdate(data) { // 处理数据 } } ``` ## 二、兄弟组件 ### 1. 事件总线(Event Bus) ```javascript // 创建bus.js import Vue from 'vue'; export const bus = new Vue(); // 组件A(发送) import { bus } from './bus'; bus.$emit('custom-event', data); // 组件B(接收) import { bus } from './bus'; bus.$on('custom-event', data => { // 处理数据 }); ``` ### 2. 通过父组件中转 ```javascript // 父组件 <component-a @send="handleSend"></component-a> <component-b :received="sharedData"></component-b> data() { return { sharedData: null } }, methods: { handleSend(data) { this.sharedData = data; } } ``` ## 三、跨层级 ### 1. Vuex状态管理 ```javascript // store.js export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } } }) // 组件使用 this.$store.commit('increment'); console.log(this.$store.state.count); ``` ### 2. provide/inject ```javascript // 祖先组件 export default { provide() { return { appData: this.sharedData } } } // 后代组件 export default { inject: ['appData'] } ``` ## 四、其他方式 ### 1. $refs直接访问 ```javascript // 父组件 <child-component ref="child"></child-component> this.$refs.child.methodName(); ``` ### 2. $parent/$children ```javascript // 访问父组件 this.$parent.parentMethod(); // 访问子组件 this.$children[0].childMethod(); ``` **方法对比表**: | 方法 | 适用场景 | 数据流向 | 复杂度 | |---------------|-------------------|--------------|------| | props/$emit | 父子组件 | 双向通信 | 低 | | Event Bus | 任意组件 | 广播通信 | 中 | | Vuex | 大型应用状态管理 | 集中式管理 | 高 | | provide/inject| 跨层级组件 | 单向递 | 中 |
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值