vue父子组件通信

发布时间:2019-05-29 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了vue父子组件通信脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1.父向子组件通信通过props传值

//父组件
<template>
    <header-box :header-title="title"></header-box>
</template>
<script>
    import header from './header';
    export default{
        name:'index',
        data(){
            return{
                title:'首页'
            }
        },
        components:{
           'header-box':header,
       }
    }
</script>
//子组件
<template>
    <div>{{textTitle}}</div>
</template>
<script>
    export default{
        name:"header",
        props:['header-title'],
        data(){
            return{
                textTitle:this.header-title
            }
        },
    }
</script>

2.子组件向父组件通信子组件定义一个事件用$emit传值