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

说明:文章会通“.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>

3:Vuex是专门为Vue官方开发的状态管理模式,可以理解为组件之间数据共享的管家。Vuex也可以作为父子间传值的一种方式,例如通过mutation操作state。

上一篇:Java项目的中的maven依赖传递注意事项


下一篇:Lua 设置元表和元方法作用