首页 > 其他 > 详细

vue子组件向父组件传递数据

时间:2017-08-12 12:15:30      阅读:230      评论:0      收藏:0      [点我收藏+]
子组件
<template>
    <div id="header">
      <input type="text" v-model="username" @change="setUser">
    </div>


</template>

<script type="text/ecmascript-6">
    export default{
        props: {
        },
        data()
        {
            return {
                username:‘‘
            }
        },
        created() {

        },
        methods: {
            setUser:function () {
              this.$emit(transferUser,this.username);
            }
        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">

</style>
父组件
<template>
  <div id="app">
    <v-header @transferUser="getUser"></v-header>
    <div>用户名{{user}}</div>
  </div>

</template>

<script type="text/ecmascript-6">
  import header from components/header/header.vue;

  export default{
        props: {},
        data()
        {
            return {
              user:‘‘
            }
        },
        created() {

        },
        methods: {
            getUser(msg){
                this.user=msg;
            }

        },
        components: {
            v-header:header,
        },
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus" rel="stylesheet/stylus">

</style>

 

vue子组件向父组件传递数据

原文:http://www.cnblogs.com/norm/p/7349762.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!