Vue 传值技巧:打破组件界限的数据交流

前言

在Vue.js中,组件之间的数据传递是一个关键的主题。本文将深入探讨Vue.js中三种常见的数据传递方式:Props、$emit事件和Vuex。

Props(属性)传递

Props是一种父组件向子组件传递数据的方式,是Vue.js中最基本和常见的数据传递方法。

在父组件中,可以通过在子组件上使用v-bind指令绑定属性,将数据传递给子组件。在子组件中,使用props属性接收传递过来的数据。

父组件

js 复制代码
<template>
    <child :message="Message" />
  </template>
  
  <script>
  import Child from './Child.vue';
  
  export default {
    components: {
      Child
    },
    data() {
      return {
        Message: 'Hello from parent!'
      };
    }
  }
  </script>

子组件

js 复制代码
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在父组件中通过v-bind指令将父组件的Message数据传递给子组件的message属性。再通过import语句引入了子组件.在子组件中使用props属性声明了一个Props,名为message。这表示子组件可以接收一个名为message的属性,而这个属性的值将由父组件传递。通过这种方式,父组件可以将数据传递给子组件,并在子组件中使用这些数据进行渲染或其他操作。

$emit 事件传递

$emit是Vue.js中用于自定义事件的方法。通过在子组件中触发事件,父组件可以监听这些事件,并接收传递过来的数据。

子组件

js 复制代码
<template>
    <button @click="Message">heello</button>
  </template>
  
  <script>
  export default {
    methods: {
      Message() {
        this.$emit('message', 'Hello from child!');
      }
    }
  }
  </script>

父组件

js 复制代码
<template>
    <Child @message="Message" />
  </template>
  
  <script>
  import Child from './Child.vue';
  
  export default {
    components: {
      Child
    },
    methods: {
      Message(message) {
        console.log(message); // 输出:Hello from child!
      }
    }
  }
  </script>

在子组件中,使用$emit方法触发了名为message的自定义事件,并传递了一个字符串 'Hello from child!' 作为数据。在父组件的模板中,通过import语句引入了子组件,在父组件的选项中,有一个Message方法,接收从子组件传递过来的数据。通过这种方式,子组件通过$emit触发自定义事件,父组件监听这个事件,并在监听函数中接收从子组件传递过来的数据。

Vuex 状态管理传递

Vuex是Vue.js的状态管理库,用于在应用的各个组件之间共享数据。通过创建一个全局的状态存储,可以实现组件之间的数据传递。

Vuex 状态存储:

js 复制代码
// store.js
import Vuex from 'vuex';

const store = new Vuex.Store({
  state: {
    message: 'Hello from Vuex!'
  }
});

export default store;

父组件

js 复制代码
<template>
  <div>{{ $store.state.message }}</div>
</template>

<script>
export default {
  computed: {
    message() {
      return this.$store.state.message;
    }
  }
}
</script>

在store.js中引入vuex,通过new Vuex.Store创建一个 Vuex 的 store 实例,在该实例 message 状态中放入一个初始值为 'Hello from Vuex!'。在父组件的模板中,通过插值语法({{ ... }})来显示从Vuex状态存储中获取的数据。$store 是Vue.js提供的全局属性,用于访问Vuex的store实例。在父组件的 computed 属性中,使用一个计算属性 message 来获取 state.message。这确保了当 state.message 发生变化时,视图会自动更新。这段代码的目的是在父组件中展示从Vuex状态存储中获取的消息。

总结

Props(属性)传递:

适用场景: 父子组件之间的简单数据传递。 实现方式: 在父组件中通过 v-bind 绑定属性,子组件通过 props 接收属性。

$emit 事件传递:

适用场景: 子组件向父组件传递数据或通知父组件触发某个操作。 实现方式: 在子组件中使用 $emit 触发自定义事件,父组件通过 @event 监听事件。

Vuex 状态管理传递:

适用场景: 大型应用中多个组件需要共享状态。 实现方式: 使用 Vuex 来创建一个全局状态存储,组件通过 this.$store 访问和修改状态。

感谢您的阅读,一键三连精彩继续

相关推荐
岁忧1 小时前
(LeetCode 面试经典 150 题 ) 11. 盛最多水的容器 (贪心+双指针)
java·c++·算法·leetcode·面试·go
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js