美文网首页
父子传参

父子传参

作者: 稻草人_9ac7 | 来源:发表于2019-12-04 16:25 被阅读0次
    //父组件
    <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>
    

    相关文章

      网友评论

          本文标题:父子传参

          本文链接:https://www.haomeiwen.com/subject/trhlgctx.html