父子传参

2019-12-04  本文已影响0人  稻草人_9ac7
//父组件
<template>
         <div id="app">       
        <div>子组件传参:{{msg}}</div>  
            <Index msg="父组件传参" @gomsg="fn"></Index>
          <Navgation></Navgation>
    </div>
</template>
<script>
import Index from './children/index'
import Navgation from '@/components/Navigation'
export default {      
    data(){
        return{
         msg:""       
        }
    },
    methods: {       
        fn(res){
            this.msg=res
        }      
    },
    computed: {      
    },
    components:{
        Index,
        Navgation   
    }    
}
</script>
<style lang="less" scoped> 
</style>
//子组件
<template>
    <div>
        <div>子组件:{{msg}}</div>     
    </div>
</template>
<script>
export default {   
props:['msg'],    
    methods: {  },
    created() {
        //子传父
        this.$emit('gomsg','李大爷') 
    },
}
</script>
上一篇 下一篇

猜你喜欢

热点阅读