返回顶部
首页 > 资讯 > 精选 >vue2.0组件间如何传值
  • 306
分享到

vue2.0组件间如何传值

2023-07-02 15:07:45 306人浏览 安东尼
摘要

今天小编给大家分享一下Vue2.0组件间如何传值的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。组件化开发是VUE中重要的开发

今天小编给大家分享一下Vue2.0组件间如何传值的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

vue2.0组件间如何传值

组件化开发是VUE中重要的开发方式,当各组件分离开发时,就必然会存在组件之间传值的问题。

props传prop值

props传值是父子组件之间传值最常见的方式,在引用子组件的时候,加入想要传输给子组件的数据并通过props进行数据获取实现传值。

Parent.vue<child :child-data = "childData"></child>Child.vueexport default {    // 数组写法    props: ["child-data"];        // 对象写法    props: {        child-data: {            type: String,            require: true, // 是否必须            default: "默认值", // 设置默认值            validator(val) {                return true;            }, // 设置值的 验证 ,验证该值是否符合(true)        }    }}

当我们使用了props完成了父组件将数据传给子组件,这种情况下,子组件从父组件中获取到的数据并不能够对数据进行更改,必须要使用$emit才能对传输的值进行修改。

$emit传值修改prop

props$emit联合使用,才能实现父子组件之间的传值,也就是通过子组件$emit处理父组件的事件来实现子组件对父组件中的数据进行修改并传值给父组件。

Parent.vue<child :child-data = "childData" @change-child="changeChild"></child>methods: {    changeChild(val) {        console.log(val); // 子组件传递过来的更改了的新值        this.childData = val;    }}Child.vuemethods: {    handleChildData() {        this.$emit("change-child", new-child-data);    }}

不仅是props,还可以通过model语法糖实现父子组件之间的传值,而且这样的传值方式特别的繁琐,会造成很多不便。

v-model传prop值

model可以将value替代具体的值与$emit完成父子组件之间的传值,写法略有不同。

Parent.vue<child v-model = "childData"></child>Child.vueexport default {    props: ["value"], // value    methods: {        handleChildData() {            this.$emit("input", new-child-data);        }    }}

也可以通过定义model(不需要使用props获取数据)来进行传值。

Parent.vue<child v-model = "childData"></child>Child.vueexport default {    model: {        prop: "child-data", // 重新取名        event: "change-child-data",    },    methods: {        handleChildData() {            this.$emit("change-child-data", new-child-data);        }    }}

然而v-model只能处理一个prop,如果我们要处理多个prop的话,就不能够使用了。

.sync实现多prop传值

Parent.vue<child :child-data.sync = "childData"></child>Child.vueexport default {    props: ["child-data"],    methods: {        handleChildData() {            this.$emit("update:child-data", new-child-data);        }    }}

不过,在vue3中,sync将不需要再使用,v-model将会支持多个prop传值。

除了使用prop传值,还可以通过ref指向组件获取子组件中的属性或者方法。

ref 子组件调用

通过ref指向组件,可以通过调用组件中的属性或者方法进行获取。

Parent.vue<child ref="child"></child>export default {    mounted() {        const child = this.$refs.child;        console.log(child.childData);        child.handleChild("handle-child-data");    }}Child.vueexport default {    data() {        return {            childData: "child-data",        }    },    methods: {        handleChild(val) {            console.log(val);        }    }}

不仅仅是可以通过ref来实现子组件数据获取,还可以通过 children&parent 来传递父子组件中的数据。

$children & $parent

$children可以获取到一个父组件的所有子组件的数组,可以通过其获取到想要操作的子组件中的属性或者方法。

$parent可以获取到父组件(对象),对其进行调用。

Parent.vuethis.$children[0].handleChild("change-child[0]-data");Child.vuethis.$parent.handleParent("change-parent-data");

但是前几种方法(prop & ref)只能实现父子组件之间的传值,并不能完成父组件与具有多层嵌套关系组件之间的传值,如果真要实现的话,将会很麻烦,会造成代码冗余、可复用性极低。

我们可以通过别的方法(attrs&listeners 、 provide&inject 、 eventBus)来实现多层嵌套组件与父组件之间的传值。

$attrs & $listeners

$attrs包含了父组件中传入孙子组件的数据(除了prop已传递的属性、classstyle)。通过v-bind="$attrs可以传入孙子组件中。

$listeners包含了父组件中的所有v-on事件(除了包含.native修饰器的)。通过v-on="$listeners将父组件中的方法传给孙子组件。

<sun-child v-bind="$attrs" v-on="$listeners"></sun-child>

provide & inject

provide可以给后代组件提供需要的数据或者方法(不管是嵌套多少层的组件)。

inject可以获取任何父组件中提供的数据或者方法,直接使用。

Parent.vueprovide() {    return {        parent-data: "parent-data",        handleParent: this.handleParent,    }},methods: {    handleParent() {},}Sun-Child.vueinject: ["parent-data", handleParent"],

但是provide & inject是不可控的,因为这个里面传递的数据并不是响应式的(其中一个数据改变,并不会影响另外的),当某个嵌套组件使用某个传输的值的时候并不能追溯到是哪个父组件,所以,这种方式并不是特别可取。

eventBus 中央事件总线

eventBus,顾名思义,中央事件总线,可以通过其实现各个层套的组件之间的传值,包括兄弟组件。

我们可以通过将其抽离出来成一个单独的js文件(Bus.js),挂载到全局(Vue.prototype.$bus)或者按需引入,又或者是存入到根对象的data上。

// 以按需引入的情况为例import Bus from 'Bus.js'Bus.$emit("handleBus", "自定义事件"); // 向外部传递数据Bus.$on("handleBus", data => {}); // 触发事件,获取数据Bus.$off("handleBus"); // 取消对自定义事件的监听

但是这些方法也只是适用于小范围内的数据使用较少的组件中,需要传递的数据过多的话,维护会很麻烦,且可复用性也极低。当数据传递量大的时候,建议使用vuex状态管理器常用)。

Tips

其实也可以通过插槽进行父子组件的值传递,不过插槽的作用不止如此,但是如果有遇到使用插槽更方便的情况的时候可以使用插槽slot

以上就是“vue2.0组件间如何传值”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注编程网精选频道。

--结束END--

本文标题: vue2.0组件间如何传值

本文链接: https://www.lsjlt.com/news/342777.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue2.0组件间如何传值
    今天小编给大家分享一下vue2.0组件间如何传值的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。组件化开发是VUE中重要的开发...
    99+
    2023-07-02
  • vue2.0中子组件如何改变props值并向父组件传值
    这篇文章主要介绍了vue2.0中子组件如何改变props值并向父组件传值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。为什么我们会有修改 p...
    99+
    2024-04-02
  • vue2.0中怎么实现组件间传值与通信
    这篇文章将为大家详细讲解有关vue2.0中怎么实现组件间传值与通信,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。一、通过路由带参数进行传值①两个组件 A和B...
    99+
    2024-04-02
  • react组件间如何传值
    React组件间传值的方式有以下几种:1. 父组件向子组件传值:父组件可以通过props属性将数据传递给子组件。子组件可以通过pro...
    99+
    2023-09-13
    react
  • vue父子组件间如何传值
    本文小编为大家详细介绍“vue父子组件间如何传值”,内容详细,步骤清晰,细节处理妥当,希望这篇“vue父子组件间如何传值”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。父组件传递方法首先,在Vue中父组件向子组件传...
    99+
    2023-07-06
  • vue2.0中组件传值的几种方式总结
    目录搭建好测试环境1.方法一父传子子传父2.方法二父传子子传父奇怪的传值3.方法三4.兄弟组件之间传值总结搭建好测试环境 app.vue <template> &l...
    99+
    2022-12-08
    vue2.0组件传值 vue组件传值 vue2.0组件传值方式
  • Vue和React组件间如何实现传值
    这篇文章主要讲解了“Vue和React组件间如何实现传值”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue和React组件间如何实现传值”吧!组件间的传值方式组件的传值场景无外乎以下几种:...
    99+
    2023-07-04
  • vue组件如何传值
    这篇文章主要介绍“vue组件如何传值”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue组件如何传值”文章能帮助大家解决问题。传值方法:1、利用props实现父传子;2、子传父,需要自定义事件,在子...
    99+
    2023-07-04
  • vue父组件如何向子组件传值
    vue父组件向子组件传值的方法:vue父组件是通过props向子组件传值的,示例如下:父组件调用子组件时,绑定动态属性。<v-header :title='title' :homemsg='...
    99+
    2024-04-02
  • Vue如何解决兄弟组件之间传值问题
    目录解决兄弟组件之间传值问题bus可以通过两种方式来实现各类组件间传值方法(父子、兄弟、页级)父子关系组件兄弟关系组件页级关系组件解决兄弟组件之间传值问题 vue中 父组件向子组件传...
    99+
    2024-04-02
  • Angular父子组件间怎么传值
    小编给大家分享一下Angular父子组件间怎么传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Angular中父子组件传值官方地址:https://angula...
    99+
    2023-06-14
  • vue3中的组件间的传值(props)
    目录vue3组件间的传值(props)父组件向子组件传值子组件向父组件传值(常规)子组件向父组件传值(v-model)vue3组件之间传值和事件处理下面介绍子组件传值总结vue3组件...
    99+
    2023-05-17
    vue3 props vue3组件间传值 组件传值vue3
  • vue中父组件如何给子组件传值
    小编给大家分享一下vue中父组件如何给子组件传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一般情况下我们父子之间的传值用的是...
    99+
    2024-04-02
  • vue2.0如何实现分页组件
    小编给大家分享一下vue2.0如何实现分页组件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!最近使用vue2.0重构项目, 需要...
    99+
    2024-04-02
  • React组件间传值及跨组件通信详解
    目录组件间传值propsref状态提升跨组件通信组件间传值 props 父传子:通过自定义属性向子组件传值,值可以是任何类型 子传父:通过父组件把方法传给子组件,子组件调用传过去的方...
    99+
    2024-04-02
  • vue如何自定义组件传值
    本篇内容介绍了“vue如何自定义组件传值”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!自定义组件传值常规prop-event父组件<p...
    99+
    2023-07-04
  • Vue组件间传值的实现解析
    目录1. 父组件向子组件传值1.1 描述1.2 props接收数据2. 子组件向父组件传值3. 兄弟组件间传值4. 事件总线5. Ref6. root/parent/children...
    99+
    2024-04-02
  • vue如何实现父子组件传值
    小编给大家分享一下vue如何实现父子组件传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!父子组件传值<!DOCTYPE&...
    99+
    2024-04-02
  • vue3中非父子组件如何传值
    小编给大家分享一下vue3中非父子组件如何传值,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!vue2中非父子组件的传值主要是通过事件总线,创建一个vue实例,通过在不同的组件中导入该实例来实现非父子组件之间的通信行为。vu...
    99+
    2023-06-22
  • Vue祖孙组件如何实现传值
    目录先看基础$props$attrs$listeners祖传孙1. $props 链2. $attrs孙传祖$listeners总结先看基础 祖孙组件,也就是 3 层嵌套的组件。关于...
    99+
    2023-03-24
    Vue祖孙组件 Vue传值 Vue组件
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作