1. Python技术站首页
  2. 其他
  3. Vue

vue传值方式的十二种方法总结

• Vue
yizhihongxing

我来为你讲解一下“Vue传值方式的十二种方法总结”的完整攻略。

一、前言

在开发Vue的过程中，我们经常需要进行组件之间的数据传递。这时候，就需要选择一种合适的传值方式。本篇文章将为大家总结了十二种常见的Vue传值方式，并对它们进行详细的介绍和对比。希望对大家在开发中提供一些帮助。

二、直接传值

最简单的方式就是直接传值。也就是说，我们可以在父组件中直接将数据传递给子组件。这种方式通常需要使用props。在父组件中，我们可以通过v-bind指令向子组件中的props传递数据。

【示例1】父组件向子组件中传递数据

父组件中的代码：

<template>
  <div>
    <child-component :child-data="parentData"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent';

export default {
  components: {
    childComponent
  },
  data() {
    return {
      parentData: '我是父组件的数据'
    }
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <p>{{ childData }}</p>
  </div>
</template>

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

三、事件传递

事件传递是将子组件中的数据通过事件穿透到父组件中。通常情况下，这种方式被用来触发一个父组件中的方法，或者改变父组件中的数据。

【示例2】子组件向父组件中传递数据

父组件中的代码：

<template>
  <div>
    <child-component v-on:child-change="handleChange"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent';

export default {
  components: {
    childComponent
  },
  data() {
    return {
      parentData: ''
    }
  },
  methods: {
    handleChange(value) {
      this.parentData = value;
    }
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <button v-on:click="handleClick">点击我改变父组件的数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-change', '我是子组件的数据');
    }
  }
}
</script>

四、Vuex

Vuex是为Vue.js应用程序开发的状态管理模式。它使用单个全局调度程序管理应用程序的所有状态。

在使用Vuex中，我们可以使用各种Getter、Commit以及Dispatch进行数据的获取和修改。简单来说，Vuex的使用可以让组件之间的数据传递更加简单明了。

五、provide/inject

provide-inject是Vue2.2.0版本中引入的新特性。它是一种向下传递数据的方式。与props相反，使用provide-inject可以直接将数据传递给所有的子组件。

在父组件中，我们使用provide提供数据。然后在children组件中，我们可以使用inject来注入数据。

【示例3】provide/inject

父组件中的代码：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent';

export default {
  components: {
    childComponent
  },
  provide() {
    return {
      parentData: '我是父组件的数据'
    }
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <p>{{ childData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['parentData'],
  computed: {
    childData() {
      return this.parentData;
    }
  }
}
</script>

六、$attrs和$listeners

当定义组件时，我们通常使用props来定义组件的属性，然后在父组件中通过v-bind来传递参数。但是，在某些情况下，我们可能需要在组件中动态添加属性。这时候，就需要使用$attrs和$listeners了。

在一个组件中，$attrs是一个包含所有没有被声明为props的属性的对象。$listeners是一个包含父组件绑定的所有事件监听器的对象。

【示例4】$attrs和$listeners

父组件中的代码：

<template>
  <div>
    <child-component v-bind="$attrs" v-on="$listeners"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent';

export default {
  components: {
    childComponent
  },
  data() {
    return {
      parentData: '我是父组件的数据'
    }
  },
  methods: {
    handleClick() {
      this.parentData = '我是改变后的值';
    }
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <p>{{ $attrs.parentData }}</p>
    <button v-on:click="$listeners['click']">点击我触发父组件中的事件</button>
  </div>
</template>

<script>
export default {}
</script>

七、$parent和$children

$parent和$children是Vue内置属性，可以在组件中直接访问。

$parent是一个属性，指向组件在父组件中的实例。$children是一个数组，包含了所有组件子实例的引用。

【示例5】$parent和$children

父组件中的代码：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent';

export default {
  components: {
    childComponent
  },
  data() {
    return {
      parentData: '我是父组件的数据'
    }
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <p>{{ $parent.parentData }}</p>
  </div>
</template>

<script>
export default {}
</script>

八、ref

在Vue中，可以使用ref来获取组件或HTML元素的引用。通过这种方式，我们可以访问组件或HTML元素的各种属性和方法。

【示例6】ref

父组件中的代码：

<template>
  <div>
    <child-component ref="myComponent"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent';

export default {
  components: {
    childComponent
  },
  methods: {
    handleClick() {
      console.log(this.$refs.myComponent);
    }
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <p>{{ childData }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      childData: '我是子组件的数据'
    }
  }
}
</script>

九、$emit

$emit是Vue中的一个方法，用于向父组件发送一个自定义的事件。当组件需要向上级组件传递数据时，可以使用该方法。

【示例7】$emit

父组件中的代码：

<template>
  <div>
    <child-component v-on:child-change="handleChange"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent';

export default {
  components: {
    childComponent
  },
  data() {
    return {
      parentData: ''
    }
  },
  methods: {
    handleChange(value) {
      this.parentData = value;
    }
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <button v-on:click="handleClick">点击我改变父组件的数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('child-change', '我是子组件的数据');
    }
  }
}
</script>

十、$root

$root是Vue组件树中最顶层的Vue实例。在子组件中，我们可以使用$root来访问根组件中的数据和方法。

【示例8】 $root

根组件中的代码：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent';

export default {
  components: {
    childComponent
  },
  data() {
    return {
      rootData: '我是根组件的数据'
    }
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <p>{{ $root.rootData }}</p>
  </div>
</template>

<script>
export default {}
</script>

十一、$attrs和$listeners

$attrs和$listeners的作用已经在第六种方式中进行了介绍，这里再介绍一下另一种使用方式。

在一个组件中，$attrs和$listeners也可以通过v-bind和v-on来进行传递。

【示例9】$attrs和$listeners

父组件中的代码：

<template>
  <div>
    <child-component v-bind="$attrs" v-on="$listeners"></child-component>
  </div>
</template>

<script>
import childComponent from './childComponent';

export default {
  components: {
    childComponent
  },
  data() {
    return {
      parentData: '我是父组件的数据'
    }
  },
  methods: {
    handleClick() {
      this.parentData = '我是改变后的值';
    }
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <p>{{ $attrs.parentData }}</p>
    <button v-on:click="$listeners['click']">点击我触发父组件中的事件</button>
  </div>
</template>

<script>
export default {}
</script>

十二、eventBus

eventBus是一种非常灵活的传值方式。在Vue中，我们可以使用eventBus来完成组件之间的数据传递。具体地，就是通过一个全局的事件总线来完成。

【示例10】eventBus

eventBus的实现：

import Vue from 'vue';
export default new Vue();

父组件中的代码：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import EventBus from './EventBus';
import childComponent from './childComponent';

export default {
  components: {
    childComponent
  },
  data() {
    return {
      parentData: '我是父组件的数据'
    }
  },
  created() {
    EventBus.$on('change', (value) => {
      this.parentData = value;
    });
  }
}
</script>

子组件中的代码：

<template>
  <div>
    <button v-on:click="handleClick">点击我改变父组件的数据</button>
  </div>
</template>

<script>
import EventBus from './EventBus';

export default {
  methods: {
    handleClick() {
      EventBus.$emit('change', '我是子组件的数据');
    }
  }
}
</script>

到这里，我们已经介绍完了十二种Vue的传值方式。它们各有优缺点，需要根据具体的情况来选择最合适的方式。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue传值方式的十二种方法总结 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Vue读取本地静态文件json的2种方法以及优缺点

    下面是详细的攻略。 Vue如何读取本地静态文件json 在Vue中，我们可以使用以下两种方法读取本地静态文件json。 方法一：使用Ajax来读取本地静态文件json 第一种方法是使用Ajax进行读取，在Vue中可以通过axios库来实现Ajax请求。将本地静态文件JSON作为静态资源放在static文件夹下： |– src | |– App.vue |…

    Vue 2023年5月28日
    00

  • Vue通知提醒框(Notification)图文详解

    Vue通知提醒框(Notification)图文详解 一、概述 Vue通知提醒框（Notification）可以让你在后台处理各种异步任务时，及时通知前端用户，提高用户体验度。Vue全家桶中有很多Notification组件可用，例如ElementUI组件库中的Notification组件等。 一般来说，Vue通知提醒框需要满足以下要求： 有核心功能如：消息…

    Vue 2023年5月28日
    00

  • vue实现加载页面自动触发函数(及异步获取数据)

    实现加载页面自动触发函数及异步获取数据，可以使用Vue的生命周期钩子函数和异步请求。 步骤一：编写需要加载的函数代码 在Vue组件中的 methods 选项中编写需要加载的函数代码。 例如： methods: { fetchData() { axios.get(‘http://api.example.com/data’) .then(response =&g…

    Vue 2023年5月28日
    00

  • Vue发布项目实例讲解

    下面就为大家详细介绍一下Vue发布项目的完整攻略。 1. 打包项目 在Vue项目开发完成后，需要将项目进行打包。Vue提供了一个命令行工具Vue CLI，可以使用Vue CLI将项目进行打包。 首先需要安装Vue CLI，可以在命令行中输入以下命令进行安装： npm install -g @vue/cli 安装完成后，在命令行中进入到项目根目录，使用以下命令…

    Vue 2023年5月28日
    00

  • vue函数防抖与节流的正确使用方法

    首先，防抖和节流都是为了解决高频率触发某个事件时造成的性能问题。 什么是函数防抖 函数防抖是指在一段时间内多次触发同一个函数时，只执行最后一次触发的函数，并在指定的等待时间后再触发该函数。 函数防抖的代码示例如下： function debounce(func, delay) { let timeout = null; return function () …

    Vue 2023年5月28日
    00

  • vue中的vue-router query方式和params方式详解

    Vue中的Vue-Router query方式和params方式详解 前言 在线路切换时，Vue提供了Vue-Router作为前端路由。 Vue-Router更好地配合Vue完成SPA（单页应用）的构造，相信很多使用过Vue-cli的开发者都踩过Vue-Router的坑。 本文将详细介绍Vue-Router的query方式和params方式作为前端路由传参。…

    Vue 2023年5月27日
    00

  • 15个Vue技巧,你都知道吗

    15个Vue技巧,你都知道吗 本篇攻略将讲解15个Vue的技巧，旨在提高您的Vue开发效率。 技巧一：使用v-for循环时，给每一项设置key 在使用v-for循环时，需要给每一项设置一个唯一的key值，以便在更新数据时能够快速定位需要更新的元素，否则会出现性能问题。 <template> <ul> <li v-for=&quo…

    Vue 2023年5月27日
    00

  • vue监听用户输入和点击功能

    下面我来分享一下Vue监听用户输入和点击功能的完整攻略。 监听用户输入 当我们需要获取用户在输入框中的输入时，我们可以使用v-model指令，在input或者textarea标签上绑定这个指令，然后就可以获取到用户输入的内容。下面是一个示例： <template> <div> <input v-model="messa…

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