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>