jquery 子组件向父级发送信号子组件接受父组件传值

转载

mob64ca13fe9c58 2024-04-02 19:53:54

文章标签 jquery 子组件向父级发送信号 bc html 数据 文章分类 jQuery 前端开发

父传子：靠自定义属性

方法一（接收数据）：
①在父组件中，在子组件的模板中定义一个自定义属性，值是父组件对象中data的值
②在子组件对象中通过props来接收数据，type：~~
③接收数据后即可使用
方法二（接收方法）：
①在父组件中，在子组件的模板中定义一个自定义属性
②在父组件中的methods中定义这个属性值
③在子组件对象的props中接收这个属性名
④在子组件中注册一个自带属性
⑤在子组件对象的methods中通过子的属性来触发来自父的属性

子传父：靠自定义事件

①@hello="f"(父组件中的son")；
②在父组件对象中methods调用方法 f(){}；
③son组件内部定义个自带属性触发；例如：<button :click="g">点击</button >；
④son组件对象method中执行g()函数来触发自定义事件hello；例如：g(){this.emit("hello",this.sondata)(并且可以带上数据)；
⑤father组件对象中：f(msg){}msg表示hello事件触发时人家给你传递的数据；
⑥定义数据：data(){return{datafromson：""}}为空；
⑦methods:{f(msg){this.datafromson=msg}}；
⑧小胡子即可调用；

组件之间的传值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <Father></Father>
</div>

<!--Father组件的模板-->
<template id="father">
    <div>
        <h3>Fahter组件---->{{ fatherData }}</h3>
        <Son></Son>
    </div>
</template>
<!--Son组件的模板-->
<template id="son">
    <div>
        <h3>Son组件---->{{ fatherData }}</h3>
    </div>
</template>
<script src="../js/vue-development.js"></script>
<script>
    // 定义Son组件
    let Son = {
        template:"#son",
    }

    // 定义Father组件
    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的数据" } },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------

父传子：核心靠自定义属性。

步骤：

1）在父组件模板中使用子组件的位的属性位置绑定父组件中的数据
        <Son :abc="fatherData"></Son>  这里面的冒号的作用

    2）在子组件对象中通过props接收数据
        let Son = {
            template:"#son",
            props:{
                /* abc表示子组件接收的数据 String表示子组件期待的数据是一个字符串，如果不是字符串，就会警告*/
                abc:String
            }
        }

    3）接收完数据，就可以使用之，在子组件模板中使用
        <template id="son">
            <div>
                <h3>Son组件==>{{ abc }}</h3>
            </div>
        </template>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <Father></Father>
</div>

<!--Father组件的模板-->
<template id="father">
    <div>
        <h3>Fahter组件---->{{ fatherData }}</h3>

        <!--abc="fatherData"是自定义属性 属性名是abc  属性值是fatherData这个字符串-->
        <!--<Son abc="fatherData"></Son>-->

        <!--:abc="fatherData" 也是自定义属性节点 属性名是abc 属性值是fatherData这个数据-->
        <Son :abc="fatherData"></Son>
    </div>
</template>

<!--Son组件的模板-->
<template id="son">
    <div>
        <h3>Son组件---->{{ abc }}</h3>
    </div>
</template>

<script src="../js/vue-development.js"></script>
<script>
    // 定义Son组件
    let Son = {
        template:"#son",
        props:{
            /* abc表示子组件接收的数据 String表示子组件期待的数据是一个字符串，如果不是字符串，就会警告*/
            abc:String
        }
    }

    // 定义Father组件
    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的数据" } },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>

props的几写法（父传子）：

1） props:{
            title:String
        }
    2） props:{
            title:{
                type:String,  // 期待是一个String
                required:true, // 要求父必须传递传递
            }
        }

    3）props:{
        title:{
            type:String,
            // required:true, // 要求父必须传递传递
            default:"这是一个默认值"
        }
     }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <Father></Father>
</div>

<template id="father">
    <div>
        <h3>Fahter组件---->{{ fatherData }}</h3>
        <!--<Son :title="fatherData"></Son>-->

        <!--没有传递数据-->
        <Son></Son>
    </div>
</template>

<template id="son">
    <div>
        <h3>Son组件---->{{ title }}</h3>
    </div>
</template>

<script src="../js/vue-development.js"></script>
<script>
    let Son = {
        template:"#son",
        /*props:{
            title:String
        }*/
        props:{
            title:{
                type:String,
                // required:true, // 要求父必须传递传递
                default:"这是一个默认值"
            }
        }
    }

    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的数据" } },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------------------

子传父：靠自定义事件

自定义事件：
    <button click="alert(123)">登录</button>
        click="alert(123)"  html标签中天生的事件   DOM中的事件绑定
    <button @click="alert(123)">登录</button>
        @click="alert(123)"  html标签中天生的事件   vue中的事件绑定
    <button @abc="alert(123)">登录</button>
        @abc="alert(123)"  html标签中的自定义事件   vue中的事件绑定   事件名就是abc
    <Father @click="alert(123)"></Father>
        @click="alert(123)" 组件中自自定义事件 事件名是click
    <Father @abc="alert(123)"></Father>
        @abc="alert(123)" 组件中自自定义事件 事件名是abc

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <Father></Father>
</div>

<template id="father">
    <div>
        <h3>Fahter组件---->{{ fatherData }}</h3>
        <!--<Son :title="fatherData"></Son>-->

        <!--没有传递数据-->
        <Son></Son>
    </div>
</template>

<template id="son">
    <div>
        <h3>Son组件---->{{ title }}</h3>
    </div>
</template>

<script src="../js/vue-development.js"></script>
<script>
    let Son = {
        template:"#son",
        /*props:{
            title:String
        }*/
        props:{
            title:{
                type:String,
                // required:true, // 要求父必须传递传递
                default:"这是一个默认值"
            }
        }
    }

    let Father = {
        template:"#father",
        data(){ return { fatherData:"Father组件中的数据" } },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>

子传父：

$emit表示触发一个自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <Father></Father>
</div>

<template id="father">
    <div>
        <h3>Fahter组件---->{{ dataFromSon }}</h3>
        <!-- @hello="f" 组件上面的自定义事件  事件名叫hello -->
        <!-- 当hello事件发生时，就调用f监听器 -->
        <!-- 现在是在father这个模板中，f监听器就需要写在Faher组件对象中 -->
        <!-- 给Son上面绑定了一个自定义事件，在son组件内部就可以触发自定义事件-->
        <!--如何触发hello事件，需要我们写代码来触发-->
        <Son @hello="f"></Son>
    </div>
</template>

<template id="son">
    <div>
        <h3>Son组件---->{{ sonData }}</h3>
        <!--@click="g" vue中绑定天生的点击事件(需要鼠标去点击就会触发天生的点击事件)-->
        <button @click="g">点我</button>
    </div>
</template>

<script src="../js/vue-development.js"></script>
<script>
    let Son = {
        template:"#son",
        methods:{
            g(){
                // this表示Son组件对象
                // $emit表示触发一个自定义事件
                // this.$emit("hello");

                // 在使用$emit触发hello事件时，可以带上数据
                this.$emit("hello",this.sonData)
            }
        },
        data(){ return { sonData:"Son组件中的数据" } },
    }

    let Father = {
        template:"#father",
        data(){ return { dataFromSon:"" } },
        methods:{
            f(msg){ // msg是就是指当hello事件触发时，触发时人家给你传递的数据
                console.log(msg)
                this.dataFromSon = msg;
            }
        },
        components: {
            Son
        }
    }

    let vm = new Vue({
        el:"#app",
        components:{
            Father
        }
    });
</script>
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。