前端-vue父子组件

最新推荐文章于 2023-12-01 20:32:51 发布

jiuyue_77

最新推荐文章于 2023-12-01 20:32:51 发布

阅读量338

点赞数 1

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

本文链接：https://blog.csdn.net/jiuyue_77/article/details/126443750

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前端-vue父子组件

文章目录

前端-vue父子组件
一、父子组件

一、父子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>

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

    <template id="mytemplate">
        <div>
            <h1>这是父组件的h1标签</h1>
            <!-- 在父组件中使用子组件 -->
            <subcomponents></subcomponents>
        </div>
    </template>


</body>

<script>

    let obj = {
        template : '#mytemplate',
        data() {
            return {
                welcome : 'hello'
            }
        },
        // 在父组件里声明一个组件集合，那么这个组件集合里的所有组件就都是子组件了
        components : {
            subcomponents : {
                template : `<div>这是一个子组件</div>`
            }
        }
    }

    let app = new Vue({
        el : '#app',
        components : {
            mycomponent : obj
        }
        
    })


</script>

</html>

1.父传子

1.1第一种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>

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

    <template id="mytemplate">
        <div>
            <h1>这是父组件的h1标签</h1>
            <!-- 在父组件中使用子组件 -->
            <!-- 父组件向子组件传值方法1 -->
            <!-- 
                步骤：
                1.在子组件的标签中，声明一个属性，属性值即为父组件向子组件传递的值
                2.在子组件中，使用props，声明接受父组件向子组件传递的载体
                3.子组件就可以使用这个属性获取父组件向子组件传递的值了
             -->

            <subcomponents msg="hello world"></subcomponents>
        </div>
    </template>


</body>

<script>

    let obj = {
        template : '#mytemplate',
        data() {
            return {
                welcome : 'hello'
            }
        },
        // 在父组件里声明一个组件集合，那么这个组件集合里的所有组件就都是子组件了
        components : {
            subcomponents : {
                template : `<div>这是一个子组件，用来接收父组件传过来的值：{{ msg }} </div>`,
                props : ['msg']
            }
        }
    }

    let app = new Vue({
        el : '#app',
        components : {
            mycomponent : obj
        }
        
    })


</script>

</html>

1.2第二种方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>

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

    <template id="mytemplate">
        <div>
            <h1>这是父组件的h1标签</h1>
            <!-- 在父组件中使用子组件 -->
            <!-- 父组件向子组件传值方法2 -->
            <!-- 使用v-bind绑定子组件标签属性 -->
            <subcomponents :msg="welcome"></subcomponents>
        </div>
    </template>


</body>

<script>

    let obj = {
        template : '#mytemplate',
        data() {
            return {
                welcome : 'hello'
            }
        },
        // 在父组件里声明一个组件集合，那么这个组件集合里的所有组件就都是子组件了
        components : {
            subcomponents : {
                template : `<div>这是一个子组件，用来接收父组件传过来的值： {{msg}} </div>`,
                props : ['msg']
            }
        }
    }

    let app = new Vue({
        el : '#app',
        components : {
            mycomponent : obj
        }
        
    })


</script>

</html>

2.子传父

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>

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

    <template id="mytemplate">
        <div>
            <h1>这是父组件的h1标签,用来接收子组件传过来的数据： {{msg}} </h1>
            <!-- 在父组件中使用子组件 -->
            <!-- 子组件向父组件传值步骤：
            
            1.需要在子组件中触发一个发送数据的事件，这里采用点击事件（send）
            2.在点击事件里使用send方法，使用emit接收2个参数，传递数据的事件和需要传递的参数（事件是自定义的）
            3.在父组件里引用子组件，并在引用的子组件中使用on监听上一步传递数据的事件
            4.在父组件中使用这个事件，有一个参数，就是从子组件中发送过来的数据
            
            -->

            <subcomponents  @childmsg="get"></subcomponents>
        </div>
    </template>


</body>

<script>

    let obj = {
        template: '#mytemplate',
        data() {
            return {
                msg: ''
            }
        },
        methods: {
            get(msg) {
                this.msg = msg
            }
        },
        // 在父组件里声明一个组件集合，那么这个组件集合里的所有组件就都是子组件了
        components: {
            subcomponents: {
                template: `<div>这是一个子组件。
                <input type='button' value='给父组件发送数据' @click='send'>
            </div>
                `,
                data() {
                    return {
                        message: '这是子组件向父组件发送的数据'
                    }
                },
                methods: {
                    send() {
                        // 传递数据的事件和需要传递的参数
                        this.$emit('childmsg', this.message)
                    }
                },
            },
        }
    }

    let app = new Vue({
        el: '#app',
        components: {
            mycomponent: obj
        }

    })


</script>

</html>

3.非父子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    
    <div id="app">
        <!-- 流程：给组件二点击事件生成随机数发给组件一 -->
        <com1></com1>
        <com2></com2>
    </div>

</body>

<script>

    // 非父子组件传值

    // 1.创建一个空的vue作为中间件，来处理非父子组件之间的传值
    var bus = new Vue()

    Vue.component('com1',{
        template : `<div>这是组件一，现在用来接收组件二发过来的值：{{count}} </div>`,
        data() {
            return {
                count : 0
            }
        },
        // 组件创建完成时，会自动执行该函数，数据请求放在这里
        created() {
            
            let $this = this
            // 3.在回调函数中，用value接收传过来的数据
            bus.$on('jianting',function(value){
                $this.count = value
            })
        },

    })


    Vue.component('com2',{
        template : `<div>这是组件二，现在给组件一发送数据 <button @click='add'>发送</button> </div>`,
        data() {
            return {
                
            }
        },
        methods: {
            add(){
                // 生成一个随机数
                var ran = Math.floor(Math.random() * 10)
                console.log(ran)
                // 2.发射事件，将随机数传递出去
                bus.$emit('jianting',ran)
            }
        },
        
    })


    let app = new Vue({
        el : '#app'
    })

</script>


</html>