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>
  • 相关阅读:
    当虚拟空间(主机)不支持301时,该怎样重定向域名
    总结高权重论坛
    一个错
    layui树形框架
    命令模式
    《编写有效用例》读书笔记2
    jieba安装与简单使用
    list正序倒序排列
    每日博客
    每日博客
  • 原文地址:https://www.cnblogs.com/norm/p/7349762.html
Copyright © 2011-2022 走看看