vue组件传值（子父、父子、兄弟）

最新推荐文章于 2022-06-18 11:14:45 发布

ssSean.

最新推荐文章于 2022-06-18 11:14:45 发布

阅读量236

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40871345/article/details/100182280

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue组件传值（子父、父子、兄弟）

vue组件传值，分三类:
1.父 ----＞子　
２.子—＞父
3.兄弟—＞兄弟

１.父向子传值

用props,3步解决:

在子组件props属性中随便取个名字,我取了cvalue
在父组件中引入子组件，将刚才取的随便的名字绑定个值，这个值名字（我取了value）为父组件的data

这个是父组件的data的value的值
绑定好了就可以肆意的在子组件中使用啦,这里cvalue的值就是父组件data中value的值
附上例子代码：

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='father'>
        <child :cvalue="value"></child>
    </div>
</body>

<template id='child'>
    <h1>{{cvalue}}</h1>
</template>

<script>
    var vm=new Vue({
        el:"#father",
        data:{
            value:'这是父组件的data'
        },
        components:{
            child: {
                template:"#child", 
                props:["cvalue"]
            }
        }  
    })

</script>
</html>

2.子向父传值

用$emit,3步解决:

在子组件创建个方法，用$emit（事件名称，要传递的值）注册事件.ps:可以理解为何click一样，触发时执行定义的函数
在子组件定义什么时候触发事件，这里我写的是当点击h1的时候tofather事件被触发
.
在父组件对tofather事件进行绑定，触发的时候要干啥（我这里调用了个方法，把触发时的值this.cvalue作为参数传了进去,注意！！！参数必须写 $e v e n t ，因为事件响应传过来的值是用$ event接收滴）

下图为我定义的父组件getvalue的方法，这里的形参可以随便取：

附上例子代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='father'>
        <child @tofather='getvalue($event)'></child>
    </div>

    <template id='child'>
            <h1　@click="onclick">这个是子组件{{cvalue}}</h1>
    </template>
</body>

</html>

<script>
    var vm=new Vue({
        el:"#father",
        data:{
            value:'这是父组件的data'
        },
        methods:{
            getvalue($event){
                alert('这个是子组件传递过来的值：'+$event)
            }

        },
        components:{
            child: {
                template:"#child", 
                data(){
                    return{
                        cvalue:'这是子组件的值'
                    }
                },
               methods: {
                  onclick(){
                     
                       this.$emit('tofather',this.cvalue)
                   }
               },
              
            }
        }  
    })

</script>

3.兄弟传值（子子传值）

方法１：先子传父，再父传子（小型项目可以这么搞）

方法２：用vuex,3步解决;
（ps:vuex相当于一个仓库，或者说是数据库，创建之后你可以随时的对这个仓库里的数据进行改查！
vuex:4个属性:state:存放数据;getters:查询数据;mutation:修改数据；action:异步运行mutation.）

创建vuex仓库:
组件１里要传的值放入仓库，我把data中的msg放入仓库，记得声明sotre属性，第二个store为所创建的Vuex.Store实例,我定义了个方法，绑定了个点击事件，调用方法

在这里插入图片描述
当点击h2时调用senMsg（）把仓库里msg的值设置为组件１中的msg的值

3. 组件2中把仓库中的msg的值设置为计算属性，当上面点击h2时，组件１修改仓库里msg的值，组件２获取到仓库中msg的值，就完成了组件１向组件２传值
在这里插入图片描述
附上例子代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <title>Document</title>
</head>
<body>
    <div id='father'>
        <syb1></syb1>
        <syb2></syb2>
    </div>
</body>
<template id='syb1'>
    <div>
     <h1>这是兄弟1</h1>
     <h2 @click="sendMsg">{{msg}}</h2>
    </div>   
</template>

<template id='syb2'>
    <div>
            <h1 >这是兄弟2</h1>
            <h1>{{getMsg}}</h1>
    </div>
        
</template>

<script>
    var store = new Vuex.Store({
        state:{
            msg:'这个是存在vuex里的值:'

        },
        getters:{
            getMsg(state){
                return state.msg
            }

        },
        mutations:{
            setMsg(state,msg){
                state.msg+=msg
            }

        },
        actions:{
            setMsg(content){
                content.commit(setMsg,msg)
            }

        }

    })

    var vm=new Vue({
        el:"#father",
        data:{
            value:'这是父组件的data',
            
        },
        created() {
            console.log(this.$store)
        },
        components:{
            syb1: {
                template:"#syb1", 
                data(){
                    return {
                        msg:'这是兄弟1的消息'
                    }
                },
                methods: {
                    sendMsg(){
                        this.$store.commit('setMsg',this.msg)
                    }
                },
                store:store
               
            },
            syb2: {
                template:"#syb2", 
                data(){
                    return {
                    }
                },
                computed: {
                    getMsg(){
                       return this.$store.state.msg
                    }
                },
                store:store
               
            }
        }  
    })
</script>
</html>