[JS][Vue]学习记录之props传值(父到子)

Demo地址

如果我们需要从父的组件传值到子组件可以用props来实现.
首先,这里有两个组件app.vue和myComponent.vue:

<template>
  <div id="app">
    <app-header></app-header>
    <myComponent v-bind:users="users"></myComponent>
    <app-footer/>
  </div>
</template>

<script>

import myComponent from './components/myComponent'
import header from './components/header'
import footer from './components/footer'

export default {
  name: 'App',
  components: {
      'app-header': header,
      'myComponent': myComponent,
      'app-footer' : footer
  },
  data(){
    return {
      users : ["allen","marry","tom"]
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

data中的users就代表我要传递的数据,这里是一个名字为users数组.我们要把数据传递到myComponent中.

<template>
  <div class="myComponent">
    <ul>
      <li v-for="user in users">
        {{user}}
      </li>
    </ul>
  </div>
</template>
<script>
export default
{
      name: 'myComponent',
        //方式一
        // props:["users"],
        //方式二
        props:{
          users:{
              type : Array,
              required : true
            }
        }
    }
}
</script>
<style scoped>
</style>

这里两种方式拿到父组件传递过来的值:

• props:["users"]:这种方式直接就能拿到,但不够严谨.
• props:{users:{ type : Array,required : true } },这种方式比较严谨,指明了数据类型以及是否必须,官方文档建议采用这种方式来接收值.