提出问题
在 vue教程：脚手架-创建第一个组件 中，UserInfo 组件的 值是不能改变的，这是 不合理 的：组件是为了 复用，那么该组件的值，是可以由 父组件修改的
在 App.vue（父组件），使用 2次 UserInfo.vue （子组件），但内容显示是不同的
效果如下图：
类似问题
如：饿了么UI中的按钮，按钮的值是可以由父组件改变的，见 链接
解决
通过 父组件向子组件传递数据 实现的，父组件通过 属性 传入数据，子组件通过 props 接收
修改 UserInfo.vue
<template>
<div id="app">
<div>昵称：{{name}}</div>
<div>性别：{{sex}}</div>
<div>年龄：{{age}}</div>
</div>
</template>
<script>
export default {
// data:function(){//这里不用data，所以注释掉
// return {
// name:'李雷',
// sex:'男',
// age:20
// }
// }
props:['name','sex','age']//定义子组件时，需要指定 props，表示父组件要传入数据
}
</script>
<style scoped>
#app{
border: red 1px solid;
}
</style>
注意： props 中的值，推荐 短横线分隔命名，不推荐驼峰命名，因为在html中 不区分大小写
修改 App.vue
静态方式传值，像自定义标签属性，代码如下：
<template>
<!-- 模板 -->
<div id="app">
使用UserInfo 组件（成对标签），静态方式传值：
<user-info name="李雷" sex="男" age="20"></user-info>
------------------------------<br>
------------------------------<br>
使用UserInfo 组件（单独一个标签），静态方式传值：
<user-info name="韩梅梅" sex="女" age="21"/>
</div>
</template>
<script>
//引入 UserInfo 组件
import UserInfo from './components/UserInfo'
export default {
name: 'App',
components: {
'user-info':UserInfo //注册局部组件
}
}
</script>
总结
传递静态Prop
像下面这种代码：
<user-info name="李雷" sex="男" age="20"></user-info>
通过 标签属性 传递的数据，都是 字符串 类型，叫 传递静态Prop
缺点
涉及到类型计算时，就会出现错误，代码如下：
<template>
<div id="app">
<div>昵称：{{name}}</div>
<div>性别：{{sex}}</div>
<div>年龄：{{age+1}} 关键：年龄加1</div>
</div>
</template>
<script>
export default {
// data:function(){
// return {
// name:'李雷',
// sex:'男',
// age:20
// }
// }
props:['name','sex','age']//定义子组件时，需要指定 props ，作用是给组件定义属性，表示父组件要传入数据
}
</script>
<style scoped>
#app{
border: red 1px solid;
}
</style>
结果
由于传入的 age 是 字符串 类型的 20，所以 {{age+1}} 表达式认为是 字符串拼接，页面显示 201，如下图：
解决
使用 传递动态Prop