vue中组件传值方法的总结

最新推荐文章于 2023-09-11 10:00:03 发布

城南花开ze

最新推荐文章于 2023-09-11 10:00:03 发布

阅读量619

点赞数 1

分类专栏： Vue 文章标签： vue 组件传值的方法父组件给子组件传值子组件给父组件传值非父子组件传值

本文链接：https://blog.csdn.net/weixin_42614080/article/details/103718406

版权

Vue 专栏收录该内容

128 篇文章 21 订阅

订阅专栏

一、vue中组件传值

在vue中，组件传值有很多方法，父组件给子组件传值、子组件给父组件传值，非父子组件传值、Vuex等等。在这里，以父组件给子组件传值、子组件给父组件传值，非父子组件传值这三种传值方法进行总结说明。

二、父组件给子组件传值

1. 父组件给子组件传值的方法：

父组件在调用子组件的地方，会添加一个自定义的属性，这个属性的值就是传递给子组件的数据，如果这个值是变量，那么就需要绑定属性。在子组件定义的地方，添加一个props选项，值为一个数组，数组的元素就是调用子组件时定义的属性名，这样就可以在子组件中通过自定义的属性名访问到父组件中传递过来的数据。

2. 代码示例：

<!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">
    <title>父组件给子组件传值</title>
    <script src="../vue.js"></script>
</head>
<body>
    
    <div id="app">
        <child :message="123"></child>
    </div>

    <script>

        Vue.component('child', {
            props: ['message'],
            template: `<h3>{{ message }}</h3>`
        });

        var vm = new Vue({
            el: "#app"
        });
    
    </script>

</body>
</html>

3. 代码说明：

父组件需要传递message这个数据给子组件child，值为变量，那么父组件需要对于message进行绑定属性。在子组件child中，通过props进行接收父组件传递过来的message数据，这样就实现了父组件给子组件传值。

三、子组件给父组件传值

1. 子组件给父组件传值的方法：

在子组件的某一个事件内部，通过 this.$emit("自定义事件的名称","传递的值")
进行传递数据，父组件在调用子组件的过程中，绑定了子组件自定义的事件，函数体不用加 (),
在定义子组件的过程中，实现函数体，函数体会带有默认的参数，这个参数的值就是子组件传递的值。

2. 代码示例：

<!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">
    <title>子组件给父组件传值</title>
    <script src="../vue.js"></script>
</head>
<body>
    
    <div id="app">
        <counter :count="1" @change="handleChange"></counter>
        <counter :count="2" @change="handleChange"></counter>
        <button>{{ total }}</button>
    </div>

    <script>
    
        Vue.component('counter', {
            props: ['count'],
            data: function() {
                return {
                    number:  this.count
                }
            },
            template: `<div @click="handleClick">{{ number }}</div>`,
            methods: {
                handleClick: function() {
                    this.number = this.number + 2;
                    this.$emit('change', 2);
                }
            }
        });

        var vm = new Vue({
            el: "#app",
            data: {
                total: 3
            },
            methods: {
                handleChange: function(val) {
                    this.total += val;
                }
            }
        });
    
    </script>
</body>
</html>

3. 代码说明：

在这里进行父子组件传值，实现一个计数器的功能。父组件需要传递count数据给子组件，子组件通过props进行接收数据，这样实现了父组件给子组件传值。在子组件中有一个handleClick的事件，当点击以后当前的count的值会发生变化，同时this.$emit会触发子组件自定义的事件change事件，父组件同时也绑定了子组件自定义的事件，handleChange，那么通过第二个参数值进行传递，每次点击后number递增2，handleChange中当前的total值也会发生递增，这样就实现了子组件给父组件传值。

四、非父子组件传值

1. 非父子组件传值的方法：

中央事件总线new Vue 的一个实例bus，Vue的原型链进行挂载，通过 this.bus.$emit()去触发事件，发送数据，通过this.bus.$on()去监听事件，接收数据，
定义中央事件总线，监听事件，触发事件，执行后续的业务逻辑

2. 代码示例：

<!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">
    <title>非父子组件传值</title>
    <script src="../vue.js"></script>
</head>
<body>

    <div id="app">
        <child content="div1"></child>
        <child content="div2"></child>
    </div>

    <script>
        
        // new创建一个Vue的实例 bus, 作为中央事件总线
        Vue.prototype.bus =  new Vue();

        Vue.component('child', {
            data: function() {
                return {
                    fullContent: this.content
                }
            },
            props: {
                content: {
                    type: String
                }
            },
            template: "<div @click='handleClick'>{{ fullContent }}</div>",
            methods: {
                handleClick: function() {
                    // 通过this.bus.$emit 去发送数据
                    this.bus.$emit('change', this.fullContent);
                }
            },
            mounted: function() {
                var this_ = this;
                // 通过this.bus.$on 去接收数据
                this.bus.$on('change', function(value){
                    this_.fullContent = value;
                });
            }
        })

        var vm = new Vue({
            el: "#app"
        });
    
    </script>

    
</body>
</html>

3. 代码说明：

在这里，有两个非父子组件，它们之间进行数据传递。首先，new创建一个Vue的实例 bus, 作为中央事件总线，在Vue的原型链上进行挂载。当点击子组件的时候会触发handleClick事件，在这个事件当中，this.bus.$emit会去触发事件change，发送数据，第二个参数this.fullContent就是当前所要发送的数据。那么在mounted钩子函数中，this.bus.$on会去监听事件，接收数据。这样就实现了非父子组件之间的传值了。

城南花开ze

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
vue中组件传值方法的总结

一、vue中组件传值在vue中，组件传值有很多方法，父组件给子组件传值、子组件给父组件传值，非父子组件传值、Vuex等等。在这里，以父组件给子组件传值、子组件给父组件传值，非父子组件传值这三种传值方法进行总结说明。二、父组件给子组件传值1. 父组件给子组件传值的方法：父组件在调用子组件的地方，会添加一个自定义的属性，这个属性的值就是传递给子组件的数据，如果这个值是变量，那么就需要绑定属性。...
复制链接

扫一扫