zoukankan      html  css  js  c++  java
  • VUE简略

    1.父组件、子组件传值

    父组件:

    <template>
      <div id="app">
          <h1>
            {{title}}
          </h1>
          <users v-bind:list="list" psMsg="父传子的内容:叫爸爸" @transfer="getUsername($event)"></users>
          <h1>{{username}}</h1>
      </div>
    </template>
    
    <script>
    import Users from './components/Users'
    
    export default {
      name: 'App',
      data(){
        return {
          'username':'',
          'title':'sssssssssssssssssss',
          'list':['111','222','333']
        }
      },
      components:{
        "users":Users
      },
      methods:{
        getUsername:function(msg){
            this.username = msg;
        }
      }
    }
    </script>
    
    <style>
    </style>
    

     子组件

    <template>
      <div class="users">
          <ul>
            <li v-for="user in users">
                {{user}}
            </li>
          </ul>
          <ul>
            <li v-for="l in list">
                {{l}}
            </li>
          </ul>
          <p>子组件接收到内容:{{ psMsg }}</p>
          <p><button @click="setUsername">传值</button></p>
      </div>
    </template>
    
    <script>
    
    
    export default {
      name: 'users',
      data(){
        return {
            users:['aaaa','bbbb','cccc'],
            username:'子组件传过来的---张学友',
        }
      },
     // props:['psMsg',"list"],
      props:{
          'psMsg':{
              type:String
          },
          'list':{
              type:Array
          }
      },
      methods:{
          setUsername:function(){
              this.$emit('transfer',this.username);
          }
      }
    }
    </script>
    
    <style>
    </style>
    

      

  • 相关阅读:
    name mangling
    Haskell: What is Weak Head Normal Form
    取模运算和取余运算的区别
    a common method to rotate the image
    代码静态分析工具
    LeeCode-Single Number III
    七夕这天
    mysql TO_DAYS()
    (转)剖析Linux文件编码的查看及修改
    docker
  • 原文地址:https://www.cnblogs.com/finnlee/p/11491385.html
Copyright © 2011-2022 走看看