vue 父组件给子组件传值

组件是当作自定义元素来使用的，HTML元素有属性，同样组件也可以有属性，利用属性给子组件内部传值，子组件使用props来接收

父组件：

<template>
  <div>
    <props-component
        :title="title"
        :subTitle="subTitle"
        :userList="userList">
    </props-component>
  </div>
</template>

<script>
import PropsComponent from '../components/PropsComponent'

export default {
  name: "test",
  components: {
    PropsComponent  //引入组件
  },
  data() {
    return {
      title: '我是父组件的titile',
      subTitle: '我是父组件的subTitle',
      userList: ['张三', '李四', '王五'], //组件的形式
    }
  }
}
</script>

<style scoped>

</style>

子组件：

<template>
  <div>
    <div>我是子组件来接收的title：{{title}}</div>
    <div>我是子组件来接收的subTitle：{{subTitle}}</div>
    <div v-for="(item,index) in userList" :key="index">姓名：{{item}}</div>
  </div>
</template>

<script>
export default {
  name: "TestComponent",
  props:['title','subTitle','userList'], //接收父组件传来的值
  data() {
    return {

    }
  }
}
</script>

<style scoped>

</style>