Vue父子组件6种通信总结合集

最新推荐文章于 2022-05-04 22:52:26 发布

小松聊PHP进阶

最新推荐文章于 2022-05-04 22:52:26 发布

阅读量167

点赞数

分类专栏： PHP 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42100387/article/details/122385482

版权

PHP 专栏收录该内容

63 篇文章 4 订阅

订阅专栏

说明：文章会通“.html”结尾的文件去编写Vue相关代码，这样适用于初学者，同时适用于“Vue-Cli”做模块化开发的读者，大同小异。

正文

基础环境代码（v2.6.11非压缩版本，这个并不重要）

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="./public/js/Vue.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app = new Vue({
        el : '#app',
    });
</script>
</html>

1. 父传子数据：props

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="./public/js/Vue.js"></script>
</head>
<body>
    <div id="app">
        <!--这里是关键点： 通过v-bind自定义子属性，来获取父组件的数据 -->
        <com1 :p_data="parent_data"></com1>
    </div>
</body>

<!-- 声明一个子组件 并使用子组件的数据-->
<template id="template_id">
    <div>{{son_data}}</div>
</template>


<script>
    const app = new Vue({
        el : '#app',
        data : {
            parent_data : '这是父组件的数据，把当前作为父组件'
        },
        components : {
            com1 : {
                template: '#template_id',
                data() {
                    return {
                        son_data : this.p_data
                    }
                },
                //通过props关键字来说明子组件要使用父组件的数据
                props : ['p_data']
            },
        }
    });
</script>
</html>
</html>

2. 子传父：$emit()

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="./public/js/Vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{parent_data}}</h1>
        <!-- 第3步 父组件的元素接收到子组件要执行emit_func()，便执行了parent_func方法 -->
        <!-- 说明：由于是子组件的数据，可以简单理解为：一些操作都要放到子组件间中执行，所以 放到com1标签中，放其它地方作甚？-->
        <com1 @emit_func="parent_func"></com1>
    </div>
</body>

<template id="template_id">
    <!-- 第1步 点击子组件的按钮，触发子组件的方法 -->
    <button @click="son_click">按钮</button>
</template>


<script>
    const app = new Vue({
        el : '#app',
        data : {
            parent_data : '',

        },
        methods : {
            //第4步，子组件触发了父组件的这个方法，并传递了值，就可以对数据进行操作。子组件向父组件通信完成
          parent_func(son_data) {
              this.parent_data = son_data;
          }
        },
        components : {
            com1 : {
                template: '#template_id',
                data() {
                    return {
                        son_data : '子组件的数据'
                    }
                },
                methods : {
                    son_click() {
                        // 第2步 子组件的方法体会执行$emit()方法，此处可以通俗的理解为，由于Vue内部的机制，子组件向父组件发射通信，告诉父组件用哪个方法接收，并且发射了什么数据，以供父组件操作。
                        this.$emit('emit_func', this.son_data);
                    }
                }
            },
        }
    });
</script>
</html>

3. 父组件获取子组件属性或方法：$refs

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="./public/js/Vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 步骤1 父组件中的按钮，点击事件调用了parent_click方法 -->
        <button @click="parent_click">父按钮</button>
        <!-- 步骤3 检测到test_ref被调用，会查找对应的组件的信息，然后会被调用 -->
        <com1 ref="test_ref"></com1>
    </div>
</body>

<template id="template_id">
    <button >子按钮</button>
</template>

<script>
    const app = new Vue({
        el : '#app',
        data : {
            parent_data : '父组件数据',
        },
        methods : {
            //步骤2 通过$refs对象调用了test_ref元素绑定的属性或者方法。
            //$refs对象是关键字，后面跟自定义ref名称
            parent_click() {
                console.log(this.$refs.test_ref.son_data);
                this.$refs.test_ref.son_func();
            }
        },
        components : {
            com1 : {
                template: '#template_id',
                data(){
                    return {
                        son_data : '子组件的数据'
                    }
                },
                methods : {
                    son_func() {
                        alert(1)
                    }
                 }
            },
        }
    });
</script>
</html>

4. 父组件获取子组件属性或方法：$children （不推荐使用，靠数字下标找对应关系，容易出错）

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="./public/js/Vue.js"></script>
</head>
<body>
    <div id="app">
        <button @click="parent_click">父按钮</button>
        <com1></com1>
    </div>
</body>

<template id="template_id">
    <button >子按钮</button>
</template>

<script>
    const app = new Vue({
        el : '#app',
        data : {
            parent_data : '父组件数据',
        },
        methods : {
            parent_click() {
                //通过下标找到子组件的数据，一旦子组件数量发生变动，下标就对应不上，造成逻辑错误。
                console.log(this.$children[0].son_data);
                this.$children[0].son_func();
            }
        },
        components : {
            com1 : {
                template: '#template_id',
                data(){
                    return {
                        son_data : '子组件的数据'
                    }
                },
                methods : {
                    son_func() {
                        alert(1)
                    }
                }
            },
        }
    });
</script>
</html>

5. 子组件获取父组件属性或方法：$parent

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="./public/js/Vue.js"></script>
</head>
<body>
    <div id="app">
        <com1></com1>
    </div>
</body>

<template id="template_id">
    <button @click="son_click">子按钮</button>
</template>

<script>
    const app = new Vue({
        el : '#app',
        data : {
            parent_data : '父组件数据',
        },
        methods : {
            parent_func() {
                alert(1);
            }
        },
        components : {
            com1 : {
                template: '#template_id',
                data(){
                    return {
                        son_data : '子组件的数据'
                    }
                },
                methods : {
                    son_click() {
                        console.log(this.$parent.parent_data);
                        this.$parent.parent_func();
                    }
                }
            },
        }
    });
</script>
</html>

6. 子组件获取根组件属性或方法：$root

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="./public/js/Vue.js"></script>
</head>
<body>
    <div id="app">
        <com1></com1>
    </div>
</body>

<template id="template_id">
    <button @click="son_click">子按钮</button>
</template>

<script>
    const app = new Vue({
        el : '#app',
        data : {
            parent_data : '父组件数据',
        },
        methods : {
            parent_func() {
                alert(1);
            }
        },
        components : {
            com1 : {
                template: '#template_id',
                data(){
                    return {
                        son_data : '子组件的数据'
                    }
                },
                methods : {
                    son_click() {
                        console.log(this.$root.parent_data);
                        this.$root.parent_func();
                    }
                }
            },
        }
    });
</script>
</html>

扩展

1：props 的增强写法，对象的形式（约束接收父级的值，父级的值违反约束会报错）。

props :{
	test_field : {
		type : [Boolean, Number], //这里的不用加引号，若此处是Object则需要default是函数，并且返回一个对象
		default : 'default value', //给默认值
		required : false, //是否必填
	}
}

2. $res：还可操作DOM元素（不推荐使用，因为Vue不推荐操作DOM）

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Vue</title>
    <script src="./public/js/Vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="getElement">按钮</button>
    <div ref="test_ref">div的值</div>
</div>
</body>

<script>
    const app = new Vue({
        el : '#app',
        data : {
            parent_data : '父组件数据',
        },
        methods : {
            getElement() {
                console.log(this.$refs.test_ref.innerText);
            }
        }
    });
</script>
</html>