harmonyos 父子组件通信

转载

imking 2024-09-03 14:14:17

文章标签 harmonyos 父子组件通信自定义 Vue 传递数据 文章分类 HarmonyOS 后端开发

使用Vue的同学，本文一、二两个小结必须掌握。

Vue父子组件数据传递方式

一*、父组件给子组件传递数据
二*、父组件给子组件传递方法
三、子组件给父组件传递数据
四、组件数据多级传递
五、组件方法多级传递
六、数据传递过于复杂解决办法

一*、父组件给子组件传递数据

1在父组件中通过v-bind传递数据
传递格式 v-bind:自定义接收名称 = "要传递数据"
2在注册组件的子组件中通过props接收数据
接收格式 props: [“自定义接收名称”]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件-父子组件数据传递</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <father></father>
</div>
<template id="father">
    <div>
        <!--注意点：组件是可以使用自己的数据的-->
        <p>组件爸爸（父组件）</p>
        <p>{{name}}</p>
        <p>{{age}}</p>
        <!--这里通过:parentname="name"将父组件的name通过parentname传递给了子组件-->
        <son v-bind:parentname="name" :parentage="age"></son>
    </div>
</template>
<template id="son">
    <div>
        <!--这里通过parentname使用了父组件传递过来的数据-->
        <p>组件儿子（子组件）</p>
        <p>{{parentname}}</p>
        <p>{{parentage}}</p>
    </div>
</template>
<script>
    /*自定义全局组件（组件名称，组件配置）*/
    Vue.component( "father", {
        template:"#father ",
        data:function(){//父组件有数据了
            return {
                name:"gege",
                age:3
            }
        },
        //子组件
        components:{
            "son":{
                template:"#son",
                //这里通过parentname接收了父组件传递过来的数据
                props:[
                    "parentname","parentage"
                ]
            }
        }
    });
    let vue = new Vue({
        el:"#app",
        // MVVM中的Model
    });
</script>
</body>
</html>

二*、父组件给子组件传递方法

1、在父组件中通过v-on(@)传递方法
传递格式 v-on:自定义接收名称 = “要传递方法”
2、在子组件中自定义一个方法
3、在自定义方法中通过 this.$emit(‘自定义接收名称’);触发传递过来的方法
注意点：
和传递数据不同，如果传递方法，那么在子组件中不需要接收
如果传递的是方法，那么需要在子组件中自定义一个方法。
如果传递的是方法，那么在子组件中直接使用自定义的方法即可
如果传递的是方法，那么需要在子组件自定义的方法中通过this.$emit(“自定义接收的名称”)的方法来触发父组件传递过来的方法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>48、vue组件-父子组件方法传递</title>
    <!--    2.下载导入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <father></father>
</div>
<template id="father">
    <!--组件只能由一个根元素-->
    <div>
        <button @click="say">阿爸</button>
        <!--这里通过parentsay将父组件的say方法传递给了子组件-->
        <son @parentsay="say"></son>
    </div>
</template>
<template id="son">
    <div>
        <button @click="sanFn">阿爸</button>
    </div>
</template>
<script>
    /*自定义全局组件（组件名称，组件配置）*/
    Vue.component( "father", {
        template:"#father ",
        methods: {
          say(){
              alert("123");
          }
        },
        //子组件
        components:{
            "son":{
                template:"#son",
                methods:{
                    sanFn(){
                        this.$emit("parentsay");
                    }
                }
            }
        }
    });
    let vue = new Vue({
        el:"#app",
    });
</script>
</body>
</html>

三、子组件给父组件传递数据

子组件给父组件传递数据其实就是子组件调用父组件方法的时候，给方法传递参数。

Vue.component( "father", {
        template:"#father ",
        methods: {
          say(data){
              console.log(data);//打印gege
          }
        },
        //子组件
        components:{
            "son":{
                template:"#son",

                // props:["parentsay"]
                methods:{
                    sanFn(){
                        /*$emit(需要调用的函数名称，给调用的函数传递参数)*/
                        this.$emit("parentsay", "gege");//“gege”即为给父组件传递的参数
                    }
                }
            }
        }
    });

四、组件数据多级传递

组件的数据多级传递时，必须一级一级传递，不能跳级传递

需求：在儿子组件中使用爷爷组件的数据及方法
<!--    2.下载导入vue.js-->
<div id="app">
    <grandfather></grandfather>
</div>
<template id="grandfather">
    <!--组件只能由一个根元素-->
    <div>
        <p>{{name}}</p>
        <father :grandfathername="name"></father>
    </div>
</template>
<template id="father">
    <div>
        <p>{{grandfathername}}</p>
        <son :fname="grandfathername"></son>
    </div>
</template>
<template id="son">
    <div>
        <p>{{fname}}</p>
    </div>
</template>
<script>
	//爷爷组件
    Vue.component( "grandfather", {
        template:"#grandfather ",
        data:function(){
            return {
                name:"yeye"
            }
        },
        //阿爸组件
        components:{
            "father":{
                template:"#father",
                props:["grandfathername"],
                //儿子
                components:{
                    "son":{
                        template:"#son",
                        props:["fname"],
                    }
                }
            }
        }
    });
    let vue = new Vue({
        el:"#app",
    });
</script>

五、组件方法多级传递

组件的方法多级传递时，必须一级一级传递，不能跳级传递

<div id="app">
    <grandfather></grandfather>
</div>
<template id="grandfather">
    <!--组件只能由一个根元素-->
    <div>
        <button @click="haha">爷爷</button>
        <father :grandfathername="name" @grandsay="haha"></father>
    </div>
</template>
<template id="father">
    <div>
        <button @click="fatherfn">阿爸</button>
        <son :fname="grandfathername" @fathersay="fatherfn"></son>
    </div>
</template>
<template id="son">
    <div>
        <button @click="sonfn">儿子</button>
    </div>
</template>
<script>
    /*自定义全局组件，注册组件（组件名称，组件配置）*/
    //爷爷组件
    Vue.component( "grandfather", {
        template:"#grandfather ",
        methods:{
            haha(){
                console.log("123");
            }
        },
        //阿爸组件
        components:{
            "father":{
                template:"#father",
                methods:{
                    fatherfn(){
                        this.$emit("grandsay")
                    }
                },
                //儿子
                components:{
                    "son":{
                        template:"#son",
                        methods:{
                            sonfn(){
                                this.$emit("fathersay")
                            }
                        },
                    }
                }

            }
        }
    });
    let vue = new Vue({
        el:"#app",
    });