Vue中组件之间的通信

2020-05-27 本文已影响0人 Jure_joe

通过绑定属性值的形式给子组件传值
使用props+v-bing（缩写:':'）绑定属性值，
程序块

<!-- 通过绑定属性值的形式给子组件传值 -->
<!-- 第一块 -->
<my-view :msg1="msg"></my-view>
<!-- 第二块 -->
<template id="temp">
    <div>
        <button type="button">传一个父级组件的值给我---{{msg1}}</button>
    </div>
</template>
<!-- 第三块 -->
const vm = new Vue({
                el:'#app',
                data:{
                    msg:'我是中国人',
                },
                methods:{
                    show(){
                        console.log("爸爸打我了！")
                    }
                },
                components:{
                    "myView":{
                        template:'#temp',
                        props:['msg1'],//props中的数据是父组件向子组件传递的数据,是只读,不建议修改(修该后控制台报错，别这么干)
                        data:function() {//这里的数据是组件私有的,可读,可写
                            return {}
                        }
                    },
                    
                }
            })

通过自定义的事件给子组件传递行为
使用this.&emit()+v-on(缩写：'@')绑定行为
程序块

<!-- 通过自定义的事件给子组件传递行为,这里的show不能加括号,因为要将方法的引用原封不动的交给子组件，如果加了就变成将方法的调用结果给子组件了 -->
<!-- 不同于组件和 prop，事件名不存在任何自动化的大小写转换。---parent-method方法名称在$emit()中不能写成parentMethod-->
<!-- 第一块 -->
<my-action @parent-method="show"></my-action>
<!-- 第二块 -->
<!-- 通过自定义的事件给子组件传递行为 -->
<template id="temp1">
    <div>
        <button type="button" @click="action">点我触发父级方法</button>
    </div>
</template>
<!-- 第三块 -->
const vm = new Vue({
                el:'#app',
                data:{
                },
                methods:{
                    show(){
                        console.log("爸爸打我了！")
                    }
                },
                components:{
                    "myAction":{
                        template:"#temp1",
                        methods:{
                            action() {
                                this.$emit("parent-method");
                            }
                        }
                    }
                }
            })

子组件向父组件传递属性值
使用this.&emit()+v-on(缩写：'@')向上传递
程序块

<!-- 子组件向父组件传递属性值 -->
<!-- 第一块 -->
<com @func="show1"></com>
<div>父级组件中的数据----{{name}}</div>
<!-- 第二块 -->
<!-- 子组件向父组件传递属性值 -->
<template id="temp2">
    <div>
        <button @click="action1">点我向父级组件传递数据</button>
    </div>
</template>
<!-- 第三块 -->
const com = {
                template:'#temp2',
                data:function() {
                    return {
                        obj:{
                            'name':'大头儿子',
                            'id':"sxxx"
                        }
                    }
                },
                methods:{
                    action1(){
                        this.$emit('func',this.obj)
                    }
                }
            }
            const vm = new Vue({
                el:'#app',
                data:{
                    name:''
                },
                methods:{
                    show1(data){
                        this.name = data.name;
                    }
                },
                components:{
                    com
                }
            })

测试代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <!-- 通过绑定属性值的形式给子组件传值 -->
            <my-view :msg1="msg"></my-view>
            <!-- 通过自定义的事件给子组件传递行为,这里的show不能加括号,因为要将方法的引用原封不动的交给子组件，如果加了就变成将方法的调用结果给子组件了 -->
            <!-- 不同于组件和 prop，事件名不存在任何自动化的大小写转换。---parent-method方法名称在$emit()中不能写成parentMethod-->
            <my-action @parent-method="show"></my-action>
            <!-- 子组件向父组件传递属性值 -->
            <com @func="show1"></com>
            <div>父级组件中的数据----{{name}}</div>
        </div>
        <template id="temp">
            <div>
                <button type="button">传一个父级组件的值给我---{{msg1}}</button>
            </div>
        </template>
        <!-- 通过自定义的事件给子组件传递行为 -->
        <template id="temp1">
            <div>
                <button type="button" @click="action">点我触发父级方法</button>
            </div>
        </template>
        <!-- 子组件向父组件传递属性值 -->
        <template id="temp2">
            <div>
                <button @click="action1">点我向父级组件传递数据</button>
            </div>
        </template>
        <script type="text/javascript">
            const com = {
                template:'#temp2',
                data:function() {
                    return {
                        obj:{
                            'name':'大头儿子',
                            'id':"sxxx"
                        }
                    }
                },
                methods:{
                    action1(){
                        this.$emit('func',this.obj)
                    }
                }
            }
            const vm = new Vue({
                el:'#app',
                data:{
                    msg:'我是中国人',
                    name:''
                },
                methods:{
                    show(){
                        console.log("爸爸打我了！")
                    },
                    show1(data){
                        this.name = data.name;
                    }
                },
                components:{
                    "myView":{
                        template:'#temp',
                        props:['msg1'],//props中的数据是父组件向子组件传递的数据,是只读,不建议修改(修该后控制台报错，别这么干)
                        data:function() {//这里的数据是组件私有的,可读,可写
                            return {}
                        }
                    },
                    "myAction":{
                        template:"#temp1",
                        methods:{
                            action() {
                                this.$emit("parent-method");
                            }
                        }
                    },
                    com
                }
            })
        </script>
    </body>
</html>

Vue中组件之间的通信

猜你喜欢

热点阅读