在写Vue组件的时候，我发现，props是个很有意思的东西。他可以传递父组件里面的属性的值给子组件。
例如有两个组件，父组件:Parent.vue，子组件:Child.vue。
Parent.vue：
<div>
<Child :props-name="names"/>
</div>
</template>
<script lang="js">
import Child from '@/components/Child.vue';
export default {
name: 'Parent',
components: {Child},
data() {
return {
names: ['张三', '李四']
}
}
}
</script>
Child.vue:
<template>
<div>
<span>{{ propsName }}</span>
</div>
</template>
<script>
export default {
name: 'Child',
props: {
propsName: {
type: Array,
default(){
return['王五']
},
id:[String,Number]
required: true
}
}
}
</script>
可以看到，我在子组件里声明了props，里面有一个Prop，名字叫propsName，类型限制为数组，并且是必要的。初始值为数组['王五']。还声明了一个叫做id的prop，没有初始值，但可以传入String和Number类型的参数。
这时候我在父组件里的html结构里引入了子组件<Child/>，这个位置就是子组件显示存在的位置。并且使用v-bind动态绑定了propsName，并传入父组件的data里的names数组。
子组件的<span>标签里我们要显示{{ propsName }}，最后就会显示从父组件传进来的data中names的内容。
最后在Router显示Parent.vue的页面时，呈现在页面上的就是
成功地动态引入了父组件的参数。
props是一个下行绑定，也就是我们并不方便从子组件去改变父组件，也就是外部传进来的值。就要声明一个函数去改变他。
子组件:
this.$emit('update:data', [...this.propsName,'王五'])
父组件：
<Child :props-name="names"
@update:data="names = $event"
/>
这样就可以将子组件的propsName拆开，加入王五接着传进父组件的names里。
通常情况下this.$emit也可以让父组件v-on或者我写的@监听事件的内容。
另外，父组件可以用.sync简写为
<Child :props-name.sync="names"
/>
