vue-子父组件传参

 

//第一步父组件App.vue中
//把父组件中的data中的users：[ ] 通过v-bind:users = "users"传递给子组件
<template>
  <div id="app">
        <Users :users="users"></Users>
  </div>
</template>
<script>
import Users from './components/Users'
export default {
  name: 'App',
  data: function () {
    return {
      users: [
        {id:1, name:'Henry'},
        {id:2, name:'Tom'}
      ]
    }
  },
  components: {
    Users
  }
}
</script>

//子组件
//父组件中传过来的值可以直接使用了<span>{{users[0].name}}</span>
<template>
    <div id="app">
        <span>通过import注册局部组件</span><br>
        <span>{{users[0].name}}</span>
    </div>
</template>
<script>
export default {
    name: 'users',
    //props:['users'],
    props: {
        users: {
            type: Array,
            required: true
        }
    }
}
</script>