登录  /  注册
首页 > web前端 > Vue.js > 正文

vue组件传值有哪五种方法

青灯夜游
发布： 2021-10-27 16:16:25
原创
55998人浏览过

vue组件传值的五种方法：1、父组件向子组件进行传值；2、子组件向父组件进行传值；3、相邻兄弟组件间进行传参；4、远兄弟组件间进行传参；5、eventbus传参。

vue组件传值有哪五种方法

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

Vue的通信方式，也可以说是传参方式：

  • 父组件向子组件进行传值：

  • 子组件向父组件进行传值：

  • 相邻兄弟组件间进行传参（亲兄弟）

  • 远兄弟传参（表兄弟）

  • EventBus传参

一、父子传参

原理：父控制子，通过子组件的props属性，抛出子组件自定义标签属性，来接收父组件的操作状态
例子：父级里的一个按钮，控制子组件里的一个p的显示隐藏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<style>
    .div{
        width:200px;
        height:200px;
        background:pink;
    }
</style>

<body>
    <!-- 这里的app范围就是  子组件son  的父级 -->
    <div id="app">
        <button @click=&#39;change&#39;>父按钮</button>
        <hr>
        <!-- **********  自定义标签属性test,接收父级的state ************-->
        <son :test=&#39;state&#39;></son>
    </div>

    <template id="tp1">
        <div>
            <!-- ************  调用自定义属性test **************-->
            <div v-show=&#39;test&#39;>我是子组件的div</div>
        </div>
    </template>

    <script src="../vue/vue.js"></script>
    <script>
        // 局部定义  子组件son
        new Vue({
            el:"#app",
            data:{
                state:true
            },
            methods:{
                change(){
                    this.state = !this.state;
                }
            },
            components:{
                son:{
                    template:"#tp1",
                    //*********** 抛出自定义标签属性 ***************
                    props:[&#39;test&#39;]
                }
            }
        })
    </script>

</body>
</html>
登录后复制

效果：

在这里插入图片描述

二、子父传参

原理：子控制父，子组件绑定自定义事件，来处理父组件的方法函数，通过.$emit(‘自定义事件’,[参数])来触发属于自己的自定义事件
例子：子组件里一个按钮，控制父组件里的一个p的显示隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<style>
    .div{
        width:200px;
        height:200px;
        background:pink;
    }
</style>

<body>

<div id="app">
        <c1></c1> 
    </div>
    
     <!-- 父组件c1   子组件c2   子组件自定义事件test-->

    <template id="c1">
        <div>
            <div v-show=&#39;state&#39;>father显示/隐藏</div>
            <hr>
            <!--************ 子组件c2自定义事件,执行父组件c1的方法函数change_f ***************** -->
            <c2 @test=&#39;change_f&#39;></c2>
        </div>
    </template>

    <template id="c2">
        <div>
            <button @click=&#39;change_son&#39;>子按钮</button>
        </div>
    </template>

<!-- 引入Vue.js框架文档，可在官方文档下载-->
<script src=&#39;../vue/vue.js&#39;></script>
<script>
    //全局定义
    // 实例化 父组件c1
    Vue.component("c1",{
        template:"#c1",
        data(){
            return {
                state:true
            }
        },
        methods:{
            change_f(){
                this.state = !this.state;
            }
        }
    })
    // 实例化 子组件c2
    Vue.component("c2",{
        template:"#c2",
        methods:{
            change_son(){
                // ************ 在子组件方法里，触发子组件自定义事件 ******************
                this.$emit("test")
            }  
        }
    })
    //实例化一个Vue对象
new Vue({
        el:"#app"
    })
</script>
</body>
</html>
登录后复制

效果：

在这里插入图片描述

三、相邻兄弟传参（亲兄弟）

原理：通过一个公有的父元素作为桥接（实例 组件），结合父子props 传参 、子父自定义事件

例子：c1、c2是兄弟关系 c1可用控制c2里元素的显示隐藏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<style>
.div{
width:200px;
height:200px;
background:pink;
}
</style>

<body>
<div id="app">
父级状态
<p>{{state}}</p>
<hr>
<c1 @test_c1=&#39;change_f&#39;></c1>
<hr>
<c2 :test_c2=&#39;state&#39;></c2>
</div>

<template id="c1">
<div>这里是c1组件
<button @click=&#39;change_c1&#39;>c1按钮</button>
</div>
</template>

<template id="c2">
<div>这里是c2组件,状态：{{test_c2}}
<div v-show=&#39;test_c2&#39;>我是c2中的div</div>
</div>
</template>

<script src=&#39;../vue/vue.js&#39;></script>
<script>

Vue.component("c2",{
template:"#c2",
props:[&#39;test_c2&#39;]
})

Vue.component("c1",{
template:"#c1",
methods:{
change_c1(){
this.$emit("test_c1")
}
}
})

new Vue({
el:"#app",
data:{
state:true
},
methods:{
change_f(){
this.state = !this.state;
}
}
})
</script>
</body>
</html>
登录后复制

效果：

在这里插入图片描述

四、远兄弟传参（表兄弟）

原理：通过创建一个中间实例，注册一个事件，在被控组件中，通过事件携带要执行的函数，在主控组件中，通过事件，改变相应的操作

1.png

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

<body>
<div id="app">
<father></father>
</div>
<template id="father">
<div>
这是父组件
<hr>
<son1></son1>
<hr>
<son2></son2>
</div>
</template>
<template id="son1">
<div>
{{name}}
<button @click=&#39;click_son1&#39;>触发angle中间事件</button>
</div>
</template>
<template id="son2">
<div>
{{name}}
</div>
</template>

<script src=&#39;../vue/vue.js&#39;></script>
<script>
//********** 创建一个angle实例，作为中间变量(全局) **************
let angel = new Vue();

new Vue({
el:"#app",
components:{
father:{
template:"#father",
components:{
son1:{
template:"#son1",
data(){
return {
name:"我是son1"
} 
},
methods:{
click_son1(){
// ***************  通过angel注册的test事件，修改son2中name的值 ************
angel.$emit(&#39;test&#39;,&#39;哈哈！修改成功！&#39;)
}
}
},
son2:{
template:"#son2",
data(){
return {
name:"我是son2"
}
},
methods:{
change(val){
this.name = val;
}
},
//生命周期，自动执行，组件准备ok就可用
mounted(){
// ***************  通过angel注册的test事件，将son1的修改方法传过去 ************
angel.$on(&#39;test&#39;,this.change)
}
}
}
}
}
})
</script>

</body>
</html>
登录后复制

效果：

点击前：

在这里插入图片描述
点击后：

在这里插入图片描述

五、EventBus传参

1.在main.js种挂载全局EventBus

Vue.prototype.$EventBus = new Vue()
登录后复制

2.A组件

<template>
    <div class="wrap">
        <div>我是组件A</div>
        <button @click="sendMsg">发送</button>
    </div>
</template>

<script>
    export default {
        name: "A",
        methods:{
            sendMsg(){
               this.$EventBus.$emit(&#39;sendMsg&#39;,"这是组件A发送的消息！")
            }
        }
    }
</script>
登录后复制

3.B组件

<template>
    <div>
        <div>我是组件B</div>
    </div>
</template>

<script>
    export default {
        name: "B",
        mounted(){
            this.$EventBus.$on(&#39;sendMsg&#39;,(msg)=>{
                console.log(msg);//这是组件A发送的消息！
            })
        },
    }
</script>
登录后复制

通过挂载全局Vue对象传递参数。

相关推荐：《vue.js教程》

以上就是vue组件传值有哪五种方法的详细内容，更多请关注php中文网其它相关文章！

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题，提供实时的代码和解决方案，帮助你解决各种难题。不仅如此，它还能提供编程资源和学习指导，帮助你快速提升编程技能。无论你是初学者还是专业人士，AI智能助手都能成为你的可靠助手，助力你在编程领域取得更大的成就。
我要提问
相关标签：
vue
来源：php中文网
收藏 点赞
上一篇：vuejs怎么删除eslint 下一篇：vue怎么导入echarts地图
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪？ 课件
凡人来自于2024-04-16 10:10:18
0 0 35
PX自动转换为REM错误  <style>html {   font-size: calc(100vw / 3.75);      }...
凡人来自于2024-04-16 09:34:16
0 0 110
PHP数组从URL参数中获取的行为不如预期 我有一个包含类别ID的URL参数，我想将其视为一个数组，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它从URL参数获取数组：$catI...
P粉785905797来自于2024-04-06 22:09:02
0 1 371
通过添加 Width 属性将内容向左移动 我已经为主体提供了边距。主要{左边缘：200px;右边距：200px；文本对齐：居中}由于我想以两行而不是一行显示文本，因此我在样式中添加了width属性。.p{字体大小：12px...
P粉738046172来自于2024-04-06 22:01:35
0 2 270
我应该在 apache 中哪里放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用运行状况检查url登录访问日志。基于此链接，他们提到了有关修改Customlog指令的信息。我不是关于需要更改Cust...
P粉573809727来自于2024-04-06 22:03:59
0 1 394
返回值中变量的格式是什么？ 我是php的新学习者。我发现有一段代码：if($x<time()){return[false,'error'];}逻辑或变量并不重要，但我不明白[false,'error']...
P粉757556355来自于2024-04-06 21:55:20
0 1 232
页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...
P粉771233336来自于2024-04-06 21:58:04
0 1 326
如何在 React 中的排序方法上触发渲染（带有过滤器和分页）？ 这是我的Sort.js样式组件：<SortWrapper><SortText>SortBy</SortText><SortSelecton...
P粉970736384来自于2024-04-06 21:28:37
0 1 1827
将将类的私有成员设置为构造函数参数 classFoo{#one#two#three#four#five#six#seven#eight#nine#ten#eleven#twelve#thirteen#fourteen...
P粉761718546来自于2024-04-06 21:48:47
0 1 240
如何从结果集中仅显示最低值（MYSQL） 我有以下声明：selectDATE(recieved_on)asDay,round(count(*)/24)AS'average'frommessagewherefacilityi...
P粉338969567来自于2024-04-06 21:44:19
0 1 221
相关专题
更多>
热门推荐
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部