vue中的父子组件

发布时间:2021-06-22 22:22:28 浏览量:109 标签: 父子组件

父子组件:

            在组件中还有一个组件,在父组的模板中可以使用子组件

            语法格式:

                new Vue({

                    el:"",

                    data:{


                    },

                    components:{

                        '父组件名':{

                            template:"父组件模板id",

                            data:function(){} => data(){},  父组件的数据

                            components:{

                                '子组件名':{

                                    template:"子组件模板id",

                                    data(){

                                        return{

                                            键:值

                                        }

                                    }

                                }

                            }

                            

                        }

                    }

                })


            使用:

                body

                    div id app

                        <父组件></父组件>

                <template id="父">

                    <子组件名></子组件名>

                </template>

                <template id="子">

                    

                </template>



父传子:

                1.父组件如果需要传递给子组件,需要在父组件模板中在使用子组件的时候,给子组件标签设置一个自定义属性

                2.需要在子组件中接收父子件在使用子组件时传递的参数(自定义属性):

                    子组件:

                        'myChile':{

                            props:{

                                自定义属性:{

                                    type:String,

                                    default:''

                                }

                            }

                        }

                3.在使用子组件接收到的父组件传入的值

                        在子组件模板中使用传递进来的数据

                        使用文本插值的方式使用数据 {{自定义属性}}

  子传父:

                子传值给父级的时候,需要有一个契机

        在子组件中声明一个自定义事件,语法格式:   this.$emit("自定义事件名",'要发送出去的数据')


搜索
关于我
吴英赫
最新标签
推广