zoukankan      html  css  js  c++  java
  • vue子组件向父组件传递数据

    子组件
    <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>
  • 相关阅读:
    简单的购物车
    分页显示
    登录验证码的实现
    简单遗传算法代码
    jQ
    2.servlet的会话机制session
    1.servlet的会话机制cookie
    基本数据类型和引用数据类型的区别
    struts2-第一章-基础用法2
    struts2第一章-基本用法
  • 原文地址:https://www.cnblogs.com/norm/p/7349762.html
Copyright © 2011-2022 走看看