Vue中props

<template>
    <div class="props-container">
        <h1>我叫:{{name}}</h1>
        <h2>我今年:{{age}}岁</h2>
        <h3>我是:{{gender}}</h3>
        <h4>我喜欢的食物是:</h4>
      <ul>
        <li v-for="(item,index) in foods" :key="index">{{item}}</li>
        <!-- <li>西兰花</li>
        <li>花菜</li>
        <li>西红柿</li> -->
      </ul>
    </div>
  </template>
  
  <script>
  export default {
      name:'PropsCom',
      props:["name","age","gender","foods"],
  }
  </script>
  

App.vue

 <!-- 使用组件 -->
    <StuProps :name="'沸羊羊'" :age="16" :gender="'男'" :foods="['鸡肉','牛肉']"></StuProps>
    <StuProps :name="name" :age="12" :gender="'男'" :foods="['话梅','西瓜']" ></StuProps>




 data(){
    return{
      name: "喜羊羊"
    }
  }

效果

 Vue中props传递参数

  父组件要正向地向子组件传递数据或参数，子组件收到后，根据传递过来的数据不同，渲染不同的页面内容，或者执行操作。
  这个正向传递数据的过程是通过props来实现的。子组件使用props来声明需要从父组件接受的数据。

props配置项

1. 功能：让组件接收外部传过来的数据

2. 传递数据：<Demo name=""/>

3. 接收数据：props:['name']

   1. 第一种方式（只接收）：

   2. 第二种方式（限制类型）：props:{name:String}

   3. 第三种方式（限制类型、限制必要性、指定默认值）：

props:{
	name:{
	type:String, //类型
	required:true, //必要性
	default:'喜羊羊' //默认值
	}
}