Vue 父组件与子组件之间的通信

最新推荐文章于 2024-03-22 21:43:27 发布

#Hideonbush

最新推荐文章于 2024-03-22 21:43:27 发布

阅读量402

点赞数

分类专栏： vue笔记

本文链接：https://blog.csdn.net/weixin_41359273/article/details/109473823

版权

vue笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.我们知道组件其实是相当于一个vue实例，它有自己的data,method，template，components等等的数据，所以它想要拿到别人的数据是要通过一定的方式的，而不是随便就可以拿到别的组件的数据
2.官网查得
1）父组件通过props可向子组件传递数据
2）子组件通过事件向父组件传递数据
3.父传子props的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <!--使用子组件-->
    <childcom :message="message"></childcom>
</div>
<template id="temp">
    <div>
        <h2>{{message}}</h2>
    </div>
</template>
<script src="./vue.js"></script>
<script>
    //vue实例本身也是一个组件
    const app = new Vue({
        el: '#content',
        data: {
            message: '陈数'
        },
        //注册一个局部组件，即为子组件
        components: {
            'childcom': {
                template: "#temp",
                props: ['message']
            }
        }
    })
</script>
</body>
</html>

结果
在这里插入图片描述
props的分析

4.子传父事件使用
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="content">
    <!--使用子组件-->
    <childcom @increment="changeMoney" @decrement="changeMoney"></childcom>
        <h2>money:{{money}}</h2>
</div>
<template id="temp">
    <div>
        <button @click="add">加</button>
        <button @click="sub">减</button>
    </div>
</template>
<script src="./vue.js"></script>
<script>
    //vue实例本身也是一个组件
    const app = new Vue({
        el: '#content',
        data: {
            message: '陈数',
            money: 0
        },
        methods: {
            //参数money用于接收子组件传来的数据
            changeMoney(counter) {
                this.money = counter
            }
        },
        //注册一个局部组件，即为子组件
        components: {
            'childcom': {
                template: "#temp",
                data() {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    add() {
                        this.counter++
                        //发射事件给父组件，父组件通过@的方式将事件与它自己的方法绑定在一起然后处理数据,后面可以传参数
                        this.$emit("increment",this.counter)
                    },
                    sub() {
                        this.counter--
                        this.$emit("decrement",this.counter)
                    }
                }
            }
        }
    })
</script>
</body>
</html>

结果

在这里插入图片描述
分析

#Hideonbush

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 父组件与子组件之间的通信

1.我们知道组件其实是相当于一个vue实例，它有自己的data,method，template，components等等的数据，所以它想要拿到别人的数据是要通过一定的方式的，而不是随便就可以拿到别的组件的数据2.官网查得1）父组件通过props可向子组件传递数据2）子组件通过事件向父组件传递数据3.父传子props的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫

专栏目录