vue 中几种传值方法(3种)

当我们在 Vue 中需要进行组件间的数据传递时,就需要使用到一些传值方法。下面将从 props、emit 和 vuex 三个方面分别介绍 Vue 中三种传值方法。

1. props

props 是 Vue 中组件间传值最常用的方法之一。它可以实现父组件向子组件传值,在子组件中可以直接使用 props 来访问。

1.1. 定义props

在父组件中定义 props,示例代码如下:

<template>
  <child :msg="message"></child>
</template>
<script>
import Child from './Child.vue'
export default {
  components:{
    Child
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

在子组件中使用 props,示例代码如下:

<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default {
  props: ['msg']
}
</script>

1.2. 使用props

  1. 在父组件中将所需的数据传入子组件。
<template>
  <child :msg="message"></child>
</template>
<script>
import Child from './Child.vue'
export default {
  components:{
    Child
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>
  1. 在子组件中使用 props。
<template>
  <h1>{{ msg }}</h1>
</template>
<script>
export default {
  props: ['msg']
}
</script>

2. emit

emit 是 Vue 中子组件向父组件传值的方法,它可以在子组件中通过 emit 方法将数据传递给父组件。

2.1. 定义emit

在子组件中定义 emit,在这个例子中,我们传递一个字符串数据:

<template>
  <h1 @click="clickHandler">{{ message }}</h1>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    clickHandler() {
      this.$emit('click-event', 'Hello Parent Component!')
    }
  }
}
</script>

2.2. 使用emit

  1. 在父组件中调用 emit 方法,并接收子组件传递的数据。
<template>
  <child @click-event="showData"></child>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  methods: {
    showData(data) {
      console.log(data)
    }
  }
}
</script>
  1. 在子组件中通过 emit 方法将数据传递给父组件。
<template>
  <h1 @click="clickHandler">{{ message }}</h1>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  methods: {
    clickHandler() {
      this.$emit('click-event', 'Hello Parent Component!')
    }
  }
}
</script>

3. vuex

vuex 是 Vue.js 中一种状态管理模式,用于在多个组件之间共享状态。通常情况下我们可以使用 props 和 emit 来进行父子组件之间的数据传递,但是当组件之间的关系变得更加复杂时,就需要使用 vuex 来进行管理了。

3.1. 定义vuex

将所有的需要共享的状态放在 Vuex 的 store 中进行管理:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

3.2. 使用vuex

  1. 在需要使用 state 的组件中引入 Vuex 并使用 mapState 将 state 映射到组件计算属性中。
<template>
  <div>
      <h1>{{ message }}</h1>
      <button @click="increment">增加</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: mapState({
    message: state => `现在的数值是${state.count}`
  }),
  methods: mapMutations([
    'increment'
  ])
}
</script>
  1. 在使用 state 的组件中使用方法来改变 state 中的数据。
<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">增加</button>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: mapState({
    message: state => `现在的数值是${state.count}`
  }),
  methods: mapMutations([
    'increment'
  ])
}
</script>

以上就是 Vue 中的三种传值方法:props、emit 和 vuex。当组件关系相对简单时可以使用 props 和 emit 进行传递数据,当组件之间的关系变得更加复杂时,可以使用 vuex 进行状态管理。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:vue 中几种传值方法(3种) - Python技术站

(0)
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • vuex入门教程,图文+实例解析

    Vuex入门教程,图文+实例解析 什么是Vuex Vuex是一个为大型单页面应用程序提供的状态管理模式,它将整个应用程序的数据状态分离出来,集中在一个数据存储库中,使应用程序的状态变得可预测。Vuex提供了一个集中式的存储空间,其中包含所有组件都可以访问的状态。 Vuex的核心概念 Vuex中的核心概念包括状态(state)、操作(mutations)、动作…

    Vue 2023年5月28日
    00
  • vue更新数据却不渲染页面的解决

    下面是关于Vue更新数据却不渲染页面的解决攻略的详细讲解。 问题背景 在Vue中,一般我们通过修改组件的数据来更新页面。但有时候在修改数据后,页面却没有自动更新,这可能会给我们带来很多困扰。这种情况在Vue中被称作“数据更新但是视图不更新”。 可能出现原因 造成“数据更新但是视图不更新”的原因主要有以下几种: Vue的异步更新机制:当我们修改Vue中的数据时…

    Vue 2023年5月29日
    00
  • Vue动态组件与内置组件浅析讲解

    Vue动态组件与内置组件浅析讲解 什么是Vue动态组件 Vue动态组件是一种结合动态组件和组件的功能,允许我们在运行时通过提供一个名称来动态切换组件。 我们可以使用Vue的内置动态组件标签\<component>,该标签可以通过一个特殊的is属性动态绑定组件。 例如: <component :is="currentComponen…

    Vue 2023年5月28日
    00
  • 详解vue组件开发脚手架

    详解Vue组件开发脚手架 简介 Vue组件开发是Vue开发中的重要一环。随着Vue的不断发展,Vue组件开发也变得越来越重要。为了方便开发者们快速构建Vue组件,我们需要一个模板或者框架。本文将详细讲解如何搭建一个Vue组件开发脚手架。 目标 我们的目标是为Vue组件开发创建一个脚手架,并且可以实现快速开发、配置简单等特点。 步骤 步骤1:安装Vue CLI…

    Vue 2023年5月28日
    00
  • Vue中过滤器定义以及使用方法实例

    下面是关于“Vue中过滤器定义以及使用方法实例”的完整攻略。 什么是Vue中的过滤器? 在Vue中,过滤器是一段可重用的代码片段,它可以在数据绑定及指令中使用。过滤器可以将数据进行格式化,并在页面中进行展示。 过滤器的定义 在Vue实例中定义过滤器的方式有两种,一种是全局定义,另一种是局部定义。 全局定义 全局定义过滤器的代码如下: Vue.filter(‘…

    Vue 2023年5月27日
    00
  • 详解Vue文档中几个易忽视部分的剖析

    详解Vue文档中几个易忽视部分的剖析 Vue.js 是一款流行的前端框架,文档非常全面,但是有些内容容易被开发者所忽略或者遗漏。本篇攻略将剖析Vue文档中几个易忽视部分。 模板语法-属性绑定 属性绑定是 Vue 中非常重要的概念,可以让我们快速且简单地将数据渲染到模板中。下面以示例说明: <div v-bind:id="dynamicId&q…

    Vue 2023年5月27日
    00
  • vue动态添加store、路由和国际化配置方式

    为了动态添加 store、路由和国际化配置,可以使用 Vue.js 提供的插件系统。下面是具体的步骤: 动态添加 store 首先,我们需要创建一个新的 store 模块。这可以通过在一个 JavaScript 文件中定义一个新模块来完成,如下所示: // myModule.js export default { state: { foo: ‘bar’ },…

    Vue 2023年5月29日
    00
  • vue如何使用el-table遍历循环表头和表体数据

    当我们需要在Vue项目中显示表格数据时,我们可以使用 Element UI 提供的 el-table 组件。在使用 el-table 组件时,经常会遇到需要遍历循环表头和表体数据的情况。下面是详细的步骤: 1. 安装 Element UI 首先,我们需要安装 Element UI。打开终端并运行以下命令: npm install element-ui –s…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部