Vue学习——组件基础之父子组件之间的传值

最新推荐文章于 2022-11-27 10:57:49 发布

爱干饭的小徐同学

最新推荐文章于 2022-11-27 10:57:49 发布

阅读量411

点赞数 1

文章标签： vue html javascript

本文链接：https://blog.csdn.net/csshuaige/article/details/118276016

版权

一、父组件向子组件传值

作用：因为在Vue的组件化开发中页面的各个功能模块对应各个组件，组件之间的传值变得尤为重要。
举例：父组件相当于导航栏，子组件相当于点击导航栏之后显示对应的内容界面；点击导航栏之后父组件先向服务器发送请求，并获取到了响应的数据，然后将这些数据传递给子组件(内容页)来显示。

主要使用：props属性

第一步：创建一个父(根)组件，即Vue实例对象：

    <script>
        // 父(根)组件
        const app = new Vue({
            el:'#ad',
            data:{
                games:['英雄联盟','穿越火线','QQ飞车']
            }
        })
    </script>

第二步：创建一个子组件：

1.子组件模板

    <template id='temp_child'>
        <div>
            <p>从父组件中传过来的数据：</p>
        </div>
    </template>

2.创建并声明子组件

// 父(根)组件
        const app = new Vue({
            el:'#ad',
            data:{
                games:['英雄联盟','穿越火线','QQ飞车']
            },
            // 定义子(局部)组件
            components:{
                // mycpn表示组件标签名
                'mycpn':{
                    template:'#temp_child',	
                    // props用于定义存储从父组件中传过来的数据
                    props:{
                        cgames:{
                            type:Array,     // 类型为数组
                            required:true,  // 不能为空
                            default:[]      // 默认为空数组
                        }
                    }
                }
            }
        })

此时父子组件都定义完成，需求是：将父组件中games数组数据传递给子组件中的cgames数组(主要是通过props命令)

第三步：在子组件标签上使用v-bind绑定子父组件传值的变量(可以绑定多个)

<div id="ad">
    <mycpn :cgames="games"></mycpn>
</div>

绑定完之后，就可以在子组件的模板中使用了

<template id='temp_child'>
     <div>
         <p>从父组件中传过来的数据：</p>
         <p v-for="item in cgames">{{item}}</p>
     </div>
</template>

运行结果：
在这里插入图片描述
实现了父组件向子组件的传值

完整代码：

<body>
    <div id="ad">
        <mycpn :cgames="games"></mycpn>
    </div>
    <template id='temp_child'>
        <div>
            <p>从父组件中传过来的数据：</p>
            <p v-for="item in cgames">{{item}}</p>
        </div>
    </template>
    <script>
        // 父(根)组件
        const app = new Vue({
            el:'#ad',
            data:{
                games:['英雄联盟','穿越火线','QQ飞车']
            },
            // 定义子(局部)组件
            components:{
                'mycpn':{
                    template:'#temp_child',
                    // props用于定义存储从父组件中传过来的数据
                    props:{
                        cgames:{
                            type:Array,     // 类型为数组
                            required:true,  // 不能为空
                            default:[]      // 默认为空数组
                        }
                    }
                }
            }
        })
    </script>
</body>

二、子组件向父组件传值

主要使用：this.$emit()方法

第一步：创建一个父(根)组件，即Vue实例对象：

    <script>
        const app = new Vue({
            el: '#ad',
            data: {
                msg: '起飞',
                count:0
            }
        })
    </script>

第二步：创建一个子组件：
举例：计数器，通过触发子组件的事件，将数据发送给父组件

1.子组件模板

    <template id="temp_count">
        <div>
            <button id="decrease">-</button>
            <button id="increase">+</button>
        </div>
    </template>

2.创建并声明子组件

<script>
        const app = new Vue({
            el: '#ad',
            data: {
                msg: '起飞',
                count:0
            },
            // 创建并注册局部组件
            components: {
                'cpn': {
                    template: "#temp_count",
                    data(){
                        return {
                            child_count:0   // 定义一个变量用于记录加减后的数字
                        }
                    }
                }
            }
        })
    </script>

HTMl代码


<div id="ad">
        <cpn></cpn>
        <div>{{count}}</div>
    </div>

效果：
在这里插入图片描述
第三步：在btn按钮上定义click事件，来操作child_count变量

<template id="temp_count">
    <div>
        <button id="decrease" @click="child_declick">-</button>
        <button id="increase" @click="child_inclick">+</button>
    </div>
</template>

在组件的methods中定义对应方法

components: {
 'cpn': {
     template: "#temp_count",
     data(){
         return {
             child_count:0   // 定义一个变量用于记录加减后的数字
         }
     },
     // 和Vue实例中的methods属性作用一致
     methods: {
         child_inclick() {
             this.child_count++;
             // 将child_btnclick事件(自定义事件)和child_count数据发送给父组件
             this.$emit("child_btnclick",this.child_count);
         },  
         child_declick() {
             this.child_count--;
             // 将child_btnclick事件(自定义事件)和child_count数据发送给父组件
             this.$emit("child_btnclick",this.child_count);
         }
     }
}

第四步：在组件标签中绑定从子组件发送过来的自定义事件

<div id="ad">
    <cpn @child_btnclick="change_count"></cpn>
    <div>{{count}}</div>
</div>

如果方法中有形参而调用方法时不使用()，则方法中形参默认接收的是当前的event事件对象。而在子向父组件传值中，方法形参会默认接收从子组件传递过来的值即child_count

change_count为父组件中定义的方法

// 父组件中定义方法来处理从子组件发送过来的数据
methods:{
	// child_count
    change_count(child_count){
        this.count = child_count;
    }
},

最终显示的效果为：
在这里插入图片描述
完整代码：


<body>
    <script src="../js/vue.js"></script>
    <div id="ad">
        <cpn @child_btnclick="change_count"></cpn>
        <div>{{count}}</div>
    </div>
    <!-- 模板 -->
    <template id="temp_count">
        <div>
            <button id="decrease" @click="child_declick">-</button>
            <button id="increase" @click="child_inclick">+</button>
        </div>
    </template>
    <script>
        const app = new Vue({
            el: '#ad',
            data: {
                msg: '起飞',
                count:0
            },
            // 父组件中定义方法来处理从子组件发送过来的数据
            methods:{
                change_count(child_count){
                    this.count = child_count;
                }
            },
            // 创建并注册局部组件
            components: {
                'cpn': {
                    template: "#temp_count",
                    data(){
                        // 定义一个变量
                        return {
                            child_count:0
                        }
                    },
                    // 和Vue实例中的methods属性作用一致
                    methods: {
                        // 将事件发送到父组件中,
                        child_inclick() {
                            this.child_count++;
                            // 将child_btnclick事件(自定义事件)和child_count数据发送给父组件
                            this.$emit("child_btnclick",this.child_count);
                        },  
                        child_declick() {
                            this.child_count--;
                            // 将child_btnclick事件(自定义事件)和child_count数据发送给父组件
                            this.$emit("child_btnclick",this.child_count);
                        }
                    }
                }
            }
        })
    </script>
</body>

总结：
父传子：1建(创建子父组件中的变量)2绑(使用v-model绑定)3用(在子组件中使用)
子传父：1建(创建子父组件中的变量)2传(传递子组件的自定义事件)3绑(绑定子父组件的事件)4用(使用父组件中的事件方法处理子组件的数据)

喜欢的朋友可以点赞加收藏哦，谢谢。

爱干饭的小徐同学

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
Vue学习——组件基础之父子组件之间的传值

一、父组件向子组件传值作用：因为在Vue的组件化开发中页面的各个功能模块对应各个组件，组件之间的传值变得尤为重要。举例：父组件相当于导航栏，子组件相当于点击导航栏之后显示对应的内容界面；点击导航栏之后父组件先向服务器发送请求，并获取到了响应的数据，然后将这些数据传递给子组件(内容页)来显示。主要使用：props属性第一步：创建一个父(根)组件，即Vue实例对象： <script> // 父(根)组件 const app = new Vue({
复制链接

扫一扫