搜索
首页web前端前端问答vue组件怎么传值

vue组件怎么传值

青灯夜游
青灯夜游
Jan 06, 2023 pm 05:26 PM
vuevue组件传值

传值方法：1、利用props实现父传子；2、子传父，需要自定义事件，在子组件中用“this.$emit(‘事件名’)”触发，而父中用“@事件名”监听；3、兄弟间，通过公有父元素作为桥接，结合父子props传参、子父自定义事件；4、用路由传值；5、用$ref传值；6、用依赖注入传给后代子孙曾孙；7、利用$attrs；8、借助$listeners中间事件；9、用$parent传等。

vue组件怎么传值

本教程操作环境：windows7系统、vue3版，DELL G3电脑。

本篇文章带大家聊聊vue组件传值的10种方式，常用的也有五六种，先上一张总结图：

1.png

1、父组件传给子组件

在子组件里定义一个props,即props:[‘msg’]，msg可以是对象也可以是基本数据类型

如果你想定义一个默认值，即 props:{msg: {type: String, default: ‘hello world’}},
若默认值是对象类型：props: { msg: { type: Object, default: () => { return { name: ‘dan_seek’ } } }}

需要注意的是这种传值是单向的，你无法改变父组件的值（当然引用类型例外）；而且如果直接修改props的值会报一个警告。

推荐的写法是在data()里重新定义一个变量（见Children.vue），并把props赋值给它，当然计算属性也行。

Children.vue

<template>
    <section>
        父组件传过来的消息是：{{myMsg}}
    </section>
</template>

<script>
    export default {
        name: "Children",
        components: {},
        props:[&#39;msg&#39;],
        data() {
            return {
                myMsg:this.msg
            }
        },
        methods: {}
    }
</script>

Parent.vue

<template>
  <div class="parent">
    <Children :msg="message"></Children>
  </div>
</template>

<script>
import Children from &#39;../components/Children&#39;

export default {
  name: &#39;Parent&#39;,
  components: {
      Children
  },
  data() {
      return {
          message:&#39;hello world&#39;
}
},
}
</script>

2、子组件传给父组件

这里需要使用自定义事件，在子组件中使用this.$emit(‘myEvent’) 触发，然后在父组件中使用@myEvent监听

Children.vue

<template>
    <div class="parent">
        这里是计数：{{parentNum}}
        <Children-Com @addNum="getNum"></Children-Com>
    </div>
</template>

<script>
    import ChildrenCom from &#39;../components/Children&#39;

    export default {
        name: &#39;Parent&#39;,
        components: {
            ChildrenCom
        },
        data() {
            return {
                parentNum: 0
            }
        },
        methods:{
            // childNum是由子组件传入的
            getNum(childNum){
                this.parentNum = childNum
            }
        }
    }
</script>

Parent.vue

d477f9ce7bf77f53fbcf36bec1b69b7a
    ebbaf37a8a85416b7048dd98c9c3b6fe
        这里是计数：{{parentNum}}
        ef6e4bf39c0fb589642272031f20b56c898036fd94a2ed4f94b67c473c3029f2
    16b28748ea4df4d9c2150843fecfba6821c97d3a051048b8e55e3c8f199a54b23f1c4e4b6b16bbbd69b2ee476dc4f83a
    import ChildrenCom from '../components/Children'

    export default {
        name: 'Parent',
        components: {
            ChildrenCom        },
        data() {
            return {
                parentNum: 0
            }
        },
        methods:{
            // childNum是由子组件传入的
            getNum(childNum){
                this.parentNum = childNum            }
        }
    }2cacc6d41bbb37262a98f745aa00fbf0

3、兄弟组件间传值

运用自定义事件emit的触发和监听能力，定义一个公共的事件总线eventBus，通过它作为中间桥梁，我们就可以传值给任意组件了。而且通过eventBus的使用，可以加深emit的理解。

EventBus.js

import Vue from &#39;vue&#39;
export default new Vue()

Children1.vue

<template>
    <section>
        <div @click="pushMsg">push message</div>
        <br>
    </section>
</template>

<script>
    import eventBus from &#39;./EventBus&#39;
    export default {
        name: "Children1",
        components: {},
        data() {
            return {
                childNum:0
            }
        },
        methods: {
            pushMsg(){
            	// 通过事件总线发送消息
                eventBus.$emit(&#39;pushMsg&#39;,this.childNum++)
            }
        }
    }
</script>

Children2.vue

<template>
    <section>
        children1传过来的消息：{{msg}}
    </section>
</template>

<script>
    import eventBus from &#39;./EventBus&#39;

    export default {
        name: "Children2",
        components: {},
        data() {
            return {
                msg: &#39;&#39;
            }
        },
        mounted() {
        	// 通过事件总线监听消息
            eventBus.$on(&#39;pushMsg&#39;, (children1Msg) => {
                this.msg = children1Msg
            })
        }
    }
</script>

Parent.vue

<template>
    <div class="parent">
        <Children1></Children1>
        <Children2></Children2>
    </div>
</template>

<script>
    import Children1 from &#39;../components/Children1&#39;
    import Children2 from &#39;../components/Children2&#39;

    export default {
        name: &#39;Parent&#39;,
        components: {
            Children1,
            Children2
        },
        data() {
            return {
            }
        },
        methods:{
        }
    }
</script>

github上还有一个开源vue-bus库，可以参考下： https://github.com/yangmingshan/vue-bus#readme

4、路由间传值

i.使用问号传值

A页面跳转B页面时使用 this.$router.push(‘/B?name=danseek’)

B页面可以使用 this.$route.query.name 来获取A页面传过来的值

上面要注意router和route的区别

ii.使用冒号传值

配置如下路由：

{
    path: &#39;/b/:name&#39;,
    name: &#39;b&#39;,
    component: () => import( &#39;../views/B.vue&#39;)
  },

在B页面可以通过 this.$route.params.name 来获取路由传入的name的值

iii.使用父子组件传值

由于router-view本身也是一个组件，所以我们也可以使用父子组件传值方式传值，然后在对应的子页面里加上props，因为type更新后没有刷新路由，所以不能直接在子页面的mounted钩子里直接获取最新type的值，而要使用watch。

00bc435fd1d10840ce5528e5c5e8332bdd6e4ababe59793a4ac75fb9e5c5550e
// 子页面
......
props: [&#39;type&#39;]
......
watch: {
            type(){
                // console.log("在这个方法可以时刻获取最新的数据:type=",this.type)
            },
        },

5、使用$ref传值

通过$ref的能力，给子组件定义一个ID，父组件通过这个ID可以直接访问子组件里面的方法和属性

首先定义一个子组件Children.vue

<template>
    <section>
        传过来的消息：{{msg}}
    </section>
</template>

<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
                msg: &#39;&#39;,
                desc:&#39;The use of ref&#39;
            }
        },
        methods:{
            // 父组件可以调用这个方法传入msg
            updateMsg(msg){
                this.msg = msg
            }
        },
    }
</script>

然后在父组件Parent.vue中引用Children.vue，并定义ref属性

<template>
    <div class="parent">
        <!-- 给子组件设置一个ID ref="children" -->
        <Children ref="children"></Children>
        <div @click="pushMsg">push message</div>
    </div>
</template>

<script>
    import Children from &#39;../components/Children&#39;

    export default {
        name: &#39;parent&#39;,
        components: {
            Children,
        },
        methods:{
            pushMsg(){
                // 通过这个ID可以访问子组件的方法
                this.$refs.children.updateMsg(&#39;Have you received the clothes？&#39;)
                // 也可以访问子组件的属性
                console.log(&#39;children props:&#39;,this.$refs.children.desc)
            }
        },
    }
</script>

6、使用依赖注入传给后代子孙曾孙

假设父组件有一个方法 getName()，需要把它提供给所有的后代

provide: function () {
  return {
    getName: this.getName()
  }
}

provide 选项允许我们指定我们想要提供给后代组件的数据/方法

然后在任何后代组件里，我们都可以使用 inject 来给当前实例注入父组件的数据/方法：

inject: [&#39;getName&#39;]

Parent.vue

<template>
    <div class="parent">
        <Children></Children>
    </div>
</template>

<script>
    import Children from &#39;../components/Children&#39;

    export default {
        name: &#39;Parent&#39;,
        components: {
            Children,
        },
        data() {
            return {
                name:&#39;dan_seek&#39;
            }
        },
        provide: function () {
            return {
                getName: this.name
            }
        },
    }
</script>

Children.vue



<script>
    export default {
        name: "Children",
        components: {},
        data() {
            return {
            }
        },
        inject: [&amp;#39;getName&amp;#39;],
    }
</script>

7、祖传孙 $attrs

正常情况下需要借助父亲的props作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改

GrandParent.vue

<template>
    <section>
        <parent name="grandParent" sex="男" age="88" hobby="code" @sayKnow="sayKnow"></parent>
    </section>
</template>

<script>
    import Parent from &#39;./Parent&#39;
    export default {
        name: "GrandParent",
        components: {
          Parent
        },
        data() {
            return {}
        },
        methods: {
          sayKnow(val){
            console.log(val)
          }
        },
        mounted() {
        }
    }
</script>

Parent.vue

<template>
  <section>
    <p>父组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <children v-bind="$attrs" v-on="$listeners"></children>
  </section>
</template>

<script>
  import Children from &#39;./Children&#39;

  export default {
    name: "Parent",
    components: {
      Children
    },
    // 父组件接收了name,所以name值是不会传到子组件的
    props:[&#39;name&#39;],
    data() {
      return {}
    },
    methods: {},
    mounted() {
    }
  }
</script>

Children.vue

<template>
  <section>
    <p>子组件收到</p>
    <p>祖父的名字：{{name}}</p>
    <p>祖父的性别：{{sex}}</p>
    <p>祖父的年龄：{{age}}</p>
    <p>祖父的爱好：{{hobby}}</p>

    <button @click="sayKnow">我知道啦</button>
  </section>
</template>

<script>
  export default {
    name: "Children",
    components: {},
    // 由于父组件已经接收了name属性，所以name不会传到子组件了
    props:[&#39;sex&#39;,&#39;age&#39;,&#39;hobby&#39;,&#39;name&#39;],
    data() {
      return {}
    },
    methods: {
      sayKnow(){
        this.$emit(&#39;sayKnow&#39;,&#39;我知道啦&#39;)
      }
    },
    mounted() {
    }
  }
</script>
显示结果
父组件收到
祖父的名字：grandParent
子组件收到
祖父的名字：
祖父的性别：男
祖父的年龄：88
祖父的爱好：code

8、孙传祖

借助$listeners中间事件，孙可以方便的通知祖，代码示例见7

9、$parent

通过parent可以获父组件实例，然后通过这个实例就可以访问父组件的属性和方法，它还有一个兄弟root，可以获取根组件实例。

语法：

// 获父组件的数据
this.$parent.foo

// 写入父组件的数据
this.$parent.foo = 2

// 访问父组件的计算属性
this.$parent.bar

// 调用父组件的方法
this.$parent.baz()

于是，在子组件传给父组件例子中，可以使用this.$parent.getNum(100)传值给父组件。

10、sessionStorage传值

sessionStorage 是浏览器的全局对象，存在它里面的数据会在页面关闭时清除 。运用这个特性，我们可以在所有页面共享一份数据。

语法：

// 保存数据到 sessionStorage
sessionStorage.setItem(&#39;key&#39;, &#39;value&#39;);

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem(&#39;key&#39;);

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem(&#39;key&#39;);

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

注意：里面存的是键值对，只能是字符串类型，如果要存对象的话，需要使用 let objStr = JSON.stringify(obj) 转成字符串然后再存储（使用的时候 let obj = JSON.parse(objStr) 解析为对象）。

这样存对象是不是很麻烦呢，推荐一个库 good-storage ，它封装了sessionStorage ，可以直接用它的API存对象

// localStorage
 storage.set(key,val) 
 storage.get(key, def)
 
 // sessionStorage
 storage.session.set(key, val)
 storage.session.get(key, val)

更多请移步：https://github.com/ustbhuangyi/storage#readme

【相关推荐：vuejs视频教程、web前端开发】

以上是vue组件怎么传值的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
反应：现代前端发展基础反应：现代前端发展基础Apr 19, 2025 am 12:23 AM

React是构建现代前端应用的JavaScript库。1.它采用组件化和虚拟DOM优化性能。2.组件使用JSX定义，状态和属性管理数据。3.Hooks简化生命周期管理。4.使用ContextAPI管理全局状态。5.常见错误需调试状态更新和生命周期。6.优化技巧包括Memoization、代码拆分和虚拟滚动。

React的未来：Web开发的趋势和创新React的未来：Web开发的趋势和创新Apr 19, 2025 am 12:22 AM

React的未来将专注于组件化开发的极致、性能优化和与其他技术栈的深度集成。1)React将进一步简化组件的创建和管理，推动组件化开发的极致。2)性能优化将成为重点，特别是在大型应用中的表现。3)React将与GraphQL和TypeScript等技术深度集成，提升开发体验。

REACT：构建UI组件的强大工具REACT：构建UI组件的强大工具Apr 19, 2025 am 12:22 AM

React是用于构建用户界面的JavaScript库，其核心思想是通过组件化构建UI。1.组件是React的基本单位，封装UI逻辑和样式。2.虚拟DOM和状态管理是组件工作的关键，状态通过setState更新。3.生命周期包括挂载、更新和卸载三个阶段，合理使用可优化性能。4.使用useState和ContextAPI管理状态，提高组件复用性和全局状态管理。5.常见错误包括状态更新不当和性能问题，可通过ReactDevTools调试。6.性能优化建议包括使用memo、避免不必要的重新渲染、使用us

使用与HTML的React：渲染组件和数据使用与HTML的React：渲染组件和数据Apr 19, 2025 am 12:19 AM

在React中使用HTML渲染组件和数据可以通过以下步骤实现：使用JSX语法：React使用JSX语法将HTML结构嵌入JavaScript代码中，编译后操作DOM。组件与HTML结合：React组件通过props传递数据，动态生成HTML内容，如。数据流管理：React的数据流是单向的，从父组件传递到子组件，确保数据流动可控，如App组件传递name到Greeting。基本用法示例：使用map函数渲染列表，需添加key属性，如渲染水果列表。高级用法示例：使用useState钩子管理状态，实现动

React的目的：构建单页应用程序（SPA）React的目的：构建单页应用程序（SPA）Apr 19, 2025 am 12:06 AM

React是构建单页面应用（SPA）的首选工具，因为它提供了高效、灵活的用户界面构建方式。1）组件化开发：将复杂UI拆分成独立、可复用的部分，提高可维护性和复用性。2）虚拟DOM：通过比较虚拟DOM与实际DOM的差异，优化渲染性能。3）状态管理：通过状态和属性管理数据流，确保数据的一致性和可预测性。

反应：JavaScript库用于Web开发的功能反应：JavaScript库用于Web开发的功能Apr 18, 2025 am 12:25 AM

React是由Meta开发的用于构建用户界面的JavaScript库，其核心是组件化开发和虚拟DOM技术。1.组件与状态管理：React通过组件（函数或类）和Hooks（如useState）管理状态，提升代码重用性和维护性。2.虚拟DOM与性能优化：通过虚拟DOM，React高效更新真实DOM，提升性能。3.生命周期与Hooks：Hooks（如useEffect）让函数组件也能管理生命周期，执行副作用操作。4.使用示例：从基本的HelloWorld组件到高级的全局状态管理（useContext和

React的生态系统：库，工具和最佳实践React的生态系统：库，工具和最佳实践Apr 18, 2025 am 12:23 AM

React生态系统包括状态管理库（如Redux）、路由库（如ReactRouter）、UI组件库（如Material-UI）、测试工具（如Jest）和构建工具（如Webpack）。这些工具协同工作，帮助开发者高效开发和维护应用，提高代码质量和开发效率。

React和前端开发：全面概述React和前端开发：全面概述Apr 18, 2025 am 12:23 AM

React是由Facebook开发的用于构建用户界面的JavaScript库。1.它采用组件化和虚拟DOM技术，提高了UI开发的效率和性能。2.React的核心概念包括组件化、状态管理（如useState和useEffect）和虚拟DOM的工作原理。3.在实际应用中，React支持从基本的组件渲染到高级的异步数据处理。4.常见错误如忘记添加key属性或不正确的状态更新可以通过ReactDevTools和日志调试。5.性能优化和最佳实践包括使用React.memo、代码分割和保持代码的可读性与可维

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前ByDDD
节省R.E.P.O.解释（并保存文件）
1 个月前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
4 周前ByDDD
显示更多

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

mPDF

mPDF

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

显示更多

热门话题

gmail邮箱登陆入口在哪里
7564
15
CakePHP 教程
1386
52
steam的账户名称是什么格式
87
11
win11激活密钥永久
61
19
NYT连接提示和答案
28
100
显示更多