Vue父子组件之间的传值

最新推荐文章于 2024-08-02 09:29:40 发布

@带甜味的盐@

最新推荐文章于 2024-08-02 09:29:40 发布

阅读量504

点赞数 1

分类专栏：前端 SYW 文章标签： Vue组件组件传值

本文链接：https://blog.csdn.net/s_y_w123/article/details/88111110

版权

SYW 同时被 2 个专栏收录

95 篇文章 3 订阅

订阅专栏

前端

81 篇文章 7 订阅

订阅专栏

Vue父子组件之间的传值

提到Vue的组件，最应该知道并且记住的一句话就是：组件是可复用的Vue实例或组件可以扩展HTML元素，封装可重用代码。

至于什么是Vue实例，怎么定义组件，怎么使用组件，我就不做赘述了，我们直接进入正题–父子组件之间怎么进行传值。

定义一个组件

<!DOCTYPE html>
<html lang="zh-CN">
<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">
    <title>Document</title>
    <script src="lib/vue-2.5.17/vue.js"></script>
</head>
<body>
    <div id="app">
        <com1></com1>
    </div>

    <!-- 这是定义的子组件模板 -->
    <template id="tmpl">
        <div></div>
    </template>
</body>
<script>
    //这是子组件
    var com1 = {
        template:'#tmpl'
    }
    //这是父组件
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        components:{
            com1
        }
    });
</script>
</html>

子组件向父组件传值

操作：

在子组件定义一条消息。
点击按钮，把这条消息传递到父组件，并显示。

注意：子组件向父组件传值，需要自定义事件，并且通过this.$emit()进行事件监听并进行传值。

看了这句话可能你会有点迷糊，我们结合代码演示一下：

首先，在子组件中定义一条消息

    var com1 = {
        template:'#tmpl',
        data(){
            return{
                msg:'这是子组件中的消息'
            }
        }
    }

定义一个按钮，并给按钮设置点击事件。

    <!-- 这是定义的子组件模板 -->
    <template id="tmpl">
        <div>
            <input type="button" value="向父组件传递消息" @click="sendMsg">
        </div>
    </template>

	//这是子组件
    var com1 = {
        template:'#tmpl',
        data(){
            return{
                msg:'这是子组件中的消息'
            }
        },
        methods:{
            sendMsg(){}
        }
    }

接下来就是重头戏传值的问题了,如何把子组件中的消息传递到父组件。

在我们自定的组件中，使用v-on：指令，定义一个事件。

    <div id="app">
        <com1 @func="getMsgFromSon"></com1>
    </div>

	//这是父组件
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            getMsgFromSon(){}
        },
        components:{
            com1
        }
    });

监听事件，并传值。

	//这是子组件
    var com1 = {
        template:'#tmpl',
        data(){
            return{
                msg:'这是子组件中的消息'
            }
        },
        methods:{
            sendMsg(){
            	// 事件监听并传值
                this.$emit('func',this.msg)
            }
        }
    }

注意：

触发的事件名需要完全匹配监听这个事件所用的名称 ：this.$emit('事件名称')
传值只需要在监听的事件名称后面继续写：this.$emit('事件名称',消息1)或this.$emit('事件名称',消息1,消息2,消息3)

父组件接收传递的消息，并显示。

    //这是父组件
    var vm = new Vue({
        el: '#app',
        data: {
            //定义一个变量
            msgFromSon:null
        },
        methods: {
            getMsgFromSon(data){
            	//接受子组件的消息
                this.msgFromSon = data
            }
        },
        components:{
            com1
        }
    });

    <!-- 显示 -->
    <div id="app">
        <com1 @func="getMsgFromSon"></com1>

	    <!-- 使用插值表达式 -->
        {{msgFromSon}}
    </div>

至此，子组件向父组件传值就完成了，我们继续下一个话题。

父组件向子组件传值

相对来说，父组件向子组件传值比较简单。

操作：

在父组件中定义一条数组。
传递给子组件并显示。

注意：父组件向子组件传值，需要使用Prop

在父组件中定义一条消息

	//这是父组件
    var vm = new Vue({
        el: '#app',
        data: {
            msg:'这是父组件中的数据'
        },
        methods: {},
        components:{
            com1
        }
    });

接下来就是如何把父组件中的值传给子组件。

我们需要自定一个属性告诉Vue，我们传入了值,使用指令v-bind:
```
    <div id="app">
        
        <com1 :parentmsg = 'msg'></com1>
    </div>
```
- 接下来，如果我们直接在子组件模板中使用插值表达式显示父组件传过来的值的话是行不通的，我们还少了重要的一步。

使用props:[]，然后在子组件中显示

    //这是子组件
    var com1 = {
        template:'#tmpl',
        //传入自定义的属性名
        props:['parentmsg']
    }

    <template id="tmpl">
        <div>
        	<!-- 使用插值表达式，写上属性名即可 -->
            <h1>这是子组件-----{{parentmsg}}</h1>
        </div>
    </template>

注意：

使用props:[]时，一定要注意自定属性字符串的名字。
如果你使用的是驼峰命名，例如：props:['parentMsg']
此时我们的写法就需要做出改变：<com1 :parent-msg = 'msg'></com1>
当然，如果你使用的是字符串模板，那就没有这条限制。

当然Prop可以传入的类型有很多，这里只是以字符串为例而已。
无论传入什么，方法都是大同小异。

好了，到这里，对于父组件和子组件之间相互传值的问题，我就介绍的差不多了，希望可以帮到你。

@带甜味的盐@

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录