当前位置: 首页>前端>正文

【Vue基础】Vue在组件数据传递详解

https://blog.csdn.net/m0_55049655/article/details/136856338

 先回顾Vue特性:

Vue.js 是一个用于构建用户界面的渐进式框架,具有许多强大的特性。以下是一些主要的 Vue 特性:

  1. 响应式数据Vue 使用双向绑定来实现数据的响应式更新。当数据发生变化时,视图会自动更新。
  2. 组件化:Vue 允许将页面拆分为多个组件,每个组件都可以封装自己的 HTML、CSS 和 JavaScript,从而实现更高效、可维护和可重用的代码。
  3. 模板语法:Vue 提供了简洁灵活的模板语法,可以直接在 HTML 中绑定数据、显示条件、循环列表等,使得编写模板更加简单和直观。
  4. 指令:Vue 提供了一系列内置的指令,如v-bind、v-if、v-for、v-on 等,用于在模板中添加特定的行为或响应事件。
  5. 计算属性和侦听器:Vue 允许使用计算属性和侦听器来处理复杂的逻辑和异步操作,保持模板的简洁性。
  6. 生命周期钩子:Vue 组件具有一系列生命周期钩子函数,可以在组件的不同阶段执行特定的操作,如created、mounted、updated、destroyed 等。
  7. 路由:Vue 提供了 Vue Router 来实现客户端路由,允许构建单页应用并实现页面间的导航。
  8. 状态管理:Vue 提供了 Vuex 库来管理应用的状态,用于在组件之间共享数据和状态,以及实现数据的响应式更新。
  9. 过渡和动画:Vue 提供了过渡和动画的支持,可以通过内置的transition组件来实现页面元素的平滑过渡和动画效果。
  10. 插件系统:Vue 具有灵活的插件系统,允许开发者扩展 Vue 的功能或集成第三方库。

这些特性使得 Vue.js 成为一个功能强大、灵活易用的前端框架,适用于构建各种规模的 Web 应用程序。

 分析上述特性,可知近一半都是围绕数据进行首先,最显著的特性就是响应式数据(数据改变视图自动改变),其次,状态管理(说白了就是数据管理,获取修改数据,‘状态’这个词让笔者联想到‘状态机’,在Promise当中也是用到状态改变[pending->fufilled/rejected]),再者计算属性和监听器也是对数据进行获取、监听和修改等操作,最后像模板语法、指令是vue在js基础上且为了要实现响应式数据而制定的标准语法

Vue中组通讯

在Vue中,组件之间的数据传递可以通过props、事件、Vuex、$emit和$refs等方式实现。以下是这些方式的简要说明:

  1. Props(属性):父组件通过props向子组件传递数据。子组件可以通过props属性接收父组件传递的数据。
  2. 事件:子组件通过$emit方法触发事件,并向父组件传递数据。父组件可以在子组件上使用v-on指令监听子组件触发的事件,并在相应的方法中处理数据。
  3. Vuex:Vuex是Vue的状态管理库,用于在多个组件之间共享数据。通过Vuex的store,不同组件可以访问和修改共享的数据。
  4. $emit:除了用于触发事件,$emit还可以直接向父组件传递数据。子组件通过$emit方法触发一个自定义事件,并将数据作为参数传递给父组件。
  5. $refs:$refs可以用来获取子组件的实例,从而调用子组件的方法或访问其数据。

【Vue基础】Vue在组件数据传递详解,【Vue基础】Vue在组件数据传递详解_Vue,第1张

编辑

这些方法可以单独或组合使用,根据具体的需求和场景选择合适的方式进行组件间数据传递。

 案例:

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :prop1="parentData" @customEvent="handleCustomEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      parentData: 'Data from parent component',
      receivedData: '',
    };
  },
  methods: {
    handleCustomEvent(data) {
      this.receivedData = data;
    },
  },
};
</script>


---------------------------------------------------------------------
<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Received prop from parent: {{ prop1 }}</p>
    <button @click="sendDataToParent">Send Data to Parent</button>
  </div>
</template>

<script>
export default {
  props: ['prop1'],
  methods: {
    sendDataToParent() {
      this.$emit('customEvent', 'Data from child component');
    },
  },
};
</script>

这个例子中,展示了以下几种 Vue 组件数据传递的方式:

  1. Props(属性):父组件通过props向子组件传递数据,在子组件中通过props属性接收。
  2. 事件(Event):子组件通过$emit方法触发一个自定义事件,并传递数据给父组件,父组件通过在子组件上监听这个事件来接收数据。
  3. 自定义事件(Custom Event):父组件在子组件上绑定一个自定义事件,子组件通过this.$emit触发这个事件,并传递数据给父组件,父组件通过在模板中使用@customEvent监听这个事件来接收数据。

这些方式可以根据具体的需求选择使用,用于实现父子组件之间的数据传递和通信。

父子之间数据传递

  • 父->子,props
  • 子-》父 ,$emit

 Vue.js提供了多种方式来实现组件之间的通信。除了父子组件之间的通信,还有兄弟组件、跨级组件的通信等。你可以学习使用props和$emit实现父子组件之间的数据传递和事件触发,使用Vuex进行状态管理,或者使用事件总线(Event Bus)进行组件之间的通信。

【Vue基础】Vue在组件数据传递详解,【Vue基础】Vue在组件数据传递详解_传递数据_02,第2张

编辑

eventBus:

【Vue基础】Vue在组件数据传递详解,【Vue基础】Vue在组件数据传递详解_Vue_03,第3张

编辑

// event-bus.js

import Vue from 'vue';

// 创建一个新的 Vue 实例作为事件总线
const EventBus = new Vue();

export default EventBus;


--------------------------------------

//在需要进行组件间通信的地方,你可以导入 event-bus.js 文件,并使用它来发送和接收事件:

// ComponentA.vue

import EventBus from './event-bus';

export default {
  methods: {
    sendDataToComponentB(data) {
      EventBus.$emit('customEvent', data);
    },
  },
};


--------------------------------------------------------------------------

// ComponentB.vue

import EventBus from './event-bus';

export default {
  created() {
    // 在组件创建时监听事件
    EventBus.$on('customEvent', this.handleCustomEvent);
  },
  methods: {
    handleCustomEvent(data) {
      console.log('Received data from ComponentA:', data);
    },
  },
};

这个示例中,event-bus.js 文件创建了一个全局的 EventBus 实例,可以在任何地方导入并使用它来进行事件的发送和接收。在 ComponentA.vue 组件中,通过 EventBus.$emit 方法发送一个自定义事件,并传递数据给 ComponentB.vue 组件。而在 ComponentB.vue 组件中,通过 EventBus.$on 方法监听这个自定义事件,并在触发时执行相应的处理函数。 

总结:定义eventBus = new Vue(),即为一个Vue实例。子组件都引用eventbus,其中一个eventBus.$emit('add',1).另外一个子组件 eventBus.on('add',(num)=>{})

Vuex插件:VueX详解_组合式vuex-CSDN博客

【Vue基础】Vue在组件数据传递详解,【Vue基础】Vue在组件数据传递详解_数据_04,第4张

编辑

【Vue基础】Vue在组件数据传递详解,【Vue基础】Vue在组件数据传递详解_Vue_05,第5张

编辑


https://www.xamrdz.com/web/24g1957717.html

相关文章: