Vue间的组件通信:props（父向子传递）、子向父的通信：$emit详解

最新推荐文章于 2024-04-02 13:42:54 发布

markjustdoit

最新推荐文章于 2024-04-02 13:42:54 发布

阅读量2.2k

点赞数

文章标签： Vue

本文链接：https://blog.csdn.net/markjustdoit/article/details/82493491

版权

通常一个单页应用会以一棵嵌套的组件树的形式来组织：

页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
左侧内容区又分为上下两个组件
右侧边栏中又包含了3个子组件

各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

先上代码：

描述：局部子组件能够显示父组件的title“玉树临风，潇洒倜傥”；当点击“点我呀”按钮，子父组件同时改变num值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <h1>我也有{{num}}位妹子迷恋我</h1>
        <hello :title="title" :num1="num" @add="add"></hello>
    </div>
</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const hello1 = {
        template:"<div>" +
        "<button @click='incr'>点我呀</button><h1>大家好，我是{{name}}。" +
        "{{title}}，有{{num1}}位妹子迷恋我，</h1></div>",
        data(){
            return {
                name: "力宏"
            }
        },
        //props: ['title1', "num1"]
        props: {
            title: {
                type: String,
                default: "xxxxx",
                required: true
            },
            num1: {
                type: Number
            }
        },
        methods: {
            incr(){
                this.$emit("add")
            }
        }
    };
    const vue = new Vue({
        el: "#app",
        data: {
            title: "玉树临风，风流倜傥",
            num: 100
        },
        components: {
            hello: hello1
        },
        methods: {
            add(){
                this.num++;
            }
        }
    })
</script>
</html>

原理:

props（父向子传递）规则：

父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
子组件通过props接收父组件属性

子向父的通信：$emit

vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数

红色表示父向子通信，蓝色表示子向父通信，顺序1,2,3,4

markjustdoit

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Vue间的组件通信:props（父向子传递）、子向父的通信：$emit详解

通常一个单页应用会以一棵嵌套的组件树的形式来组织：页面首先分成了顶部导航、左侧内容区、右侧边栏三部分左侧内容区又分为上下两个组件右侧边栏中又包含了3个子组件各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。先上代码：描述：局部子组件能够显示父组件的title“玉树临风，潇洒倜傥”；当点击“点我呀”按钮，子父组件同时改变...
复制链接

扫一扫