关于props，老套路，看下官网的解释：
props可以是数组或对象，用于接收父组件的数据。。。
之所以父组件的数据需要通过props传到子组件中，因为组件实例的作用域是孤立的，子组件模板不可能直接引用父组件数据。。。（也就是说子组件不能在模板中渲染父组件中的数据）
<div id="app">
<son-component :alias="name"></son-component>
</div>
<script>
var sonComponent = {
props:["alias"],
data(){
return {
myalias:this.alias
}
},
//可直接把数据写在摸板中，在data 或方法中取props里边的数据用this.xxx
template:`<div>{{myalias}}{{alias}}</div>`
}
//根实例中的name数据传给子组件
var vm = new Vue({
el:"#app",
data:{
name:"吕星辰"
},
components:{
sonComponent
}
})
</script>
上边代码，子组件"son-component"引用了父组件（根实例）的name数据，在自定义标签上，name是父组件中的数据，前边alias是自定义的名字，子组件也是通过自定义名字来接受父组件传来的值。
porp类型
数组：可以传多个数据
props:["title","name","age", ··· ]
对象：可以指定props中的每一个值的类型
props:{
title:String,//title必须是字符串类型
name:String,//name必须是字符串类型
age:Number,//age必须是数字类型
callback:Function//callback必须是函数
}
prop验证
我们可以为props中的值提供一个带有验证需求的对象，而不是字符串数组。
这一点在开发中经常会用到，基于vue封装一些组件库时尤为重要。
大致分为5种情况：
Vue.component("myComponent",{
props:{
//基础类型的检查
param1:Number,
//字符串或数字都行
param2:[String,Number],
//param3必须要填写，而且要是字符串类型的才行
param3:{
type:String,
require:true
},
//如果param4没有传的话，默认值是100
param4:{
type:Number,
default:100
},
//自定义校验函数(value是传递过来的参数，且必须是数组中的某一个)
param5:{
validator(value){
return ["hehe","haha","heihei"].indexOf(value) !== -1
}
},
//如果参数是一个数组 或者对象 ，默认值必须从工厂函数中获取
param6:{
default(){
return {width:"100px",height:"30px",backgroundColor:red}
}
}
}
})
当验证失败时，Vue会产生一个控制台警告。
类型检查中的type可以是：String、Number、Boolean、Array、Object、Date、Function、Symbol。
在这里我们说几个值得注意的地方：
1、子组件中不可以更改来自父组件的数据。
<div id="app">
<son-component :num="number"></son-component>
</div>
<script>
//子组件
let sonComponent = {
props:["num"],
template:`<button @click="changeData">{{num}}</button>`,
//修改父组件传过来的数据
methods:{
changeData(){
this.num = 30
}
}
}
//父组件
let vm = new Vue({
el: "#app",
data: {
number: 20
},
components: {
sonComponent
}
});
</script>
这里Vue会报错。
如果你非要修改，有两种方法，相信大家从上边vue报错中也能发现，官方给提供了这2种方法：（分情况而定，根据不同需求来）
一、在data中，可在子组件data数据对象中把父组件数据保存，这样会有一个问题，父组件数据更改，子组件中的props里边的数据会更新，但是子组件模板中的数据不会更新！
let sonComponent = {
props: ["num"],
data() {
return {
changeNum: this.num//把数据线存到changeNum中，更改changeNum
};
},
template: `<button @click="changeData">{{changeNum}}</button>`,
methods: {
changeData() {
this.changeNum = 30;
}
}
};
二、在计算属性中：
<div id="app">
<son-component :alias="name"></son-component>
</div>
<script>
let sonComponent = {
props: ["alias"],
template: `<p>{{myAlias}}</p>`,
computed: {
myAlias() {
return this.alias.trim()
}
}
};
let vm = new Vue({
el: "#app",
data: {
name:" lxc "
},
components: {
sonComponent
}
});
</script>
2、子组件中更改来自父组件对象形式的数据，父组件数据也会跟着更改，因为对象或数组都是引用类型的，当一个对象赋给一个变量时，这个变量只是引用的对象地址。
<div id="app">
<son-component :change="author"></son-component>
</div>
<script>
let sonComponent = {
props: ["change"],
template: `<button @click="changeFatherData">{{change}}</button>`,
methods: {
//更改数据对象中的name属性
changeFatherData() {
this.change.name = "hehe";
}
}
};
let vm = new Vue({
el: "#app",
data: {
author:{name:"lxc",age:20,height:170}
},
components: {
sonComponent
}
});
</script>
结果显示：父组件中的name属性也改变了。。。
以上是vue中props用法，有不足的地方，希望指正，以后我会随时更新。。。
补充：
一个小例子：
一个button按钮组件：
<template>
<div class="home">
<about :myStyle="style" :mycontent="content"></about>
</div>
</template>
<script>
import about from '@/views/About.vue'
export default {
name: 'home',
data(){
return{
content:"click",
style:{
width:"80px",
height:"30px",
backgroundColor:"#f40",
color:"#fff",
lineHeight:"30px",
}
}
},
components: {
about
}
}
</script>
子组件用props接受来自父组件的数据
<template>
<div class="about">
<div :style="myStyle">{{mycontent}}</div>
</div>
</template>
<script>
export default {
name:"about",
props:{
mycontent:{
type:String,
default:"click"
},
myStyle:{
type:Object,
default(){
return {
width:"200px",
height:"50px",
backgroundColor:"#000",
borderRadius:"5px",
color:"#fff",
textAline:"center",
lineHeight:"50px",
fontSize:"30px"
}
}
}
}
}
</script>
渲染结果：
