目录
引言
这一篇文章主要是叙述一下父子组件之间的传值方式，以及对所传值的要求。
组件传递参数_Props
组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递参数的。传递数据的解决方式就是props。（Props传递数据，只能从父级传递到子集，不能反其道而行。）
静态数据的传递
父组件：
<template>
<h3>组件传递数据</h3>
<h3>parent</h3>
<Child test="test"/>
</template>
<script >
import Child from './child.vue';
export default{
components:{
Child
},
data(){
return{
}
}
}
</script>
子组件
<template>
<h3>child</h3>
<p>{{test}}</p>
</template>
<script >
export default{
data(){
return{
}
},
props:['test']
}
</script>
输出效果：
注意：传递的数量本身是没有限制的。
动态数据的传递
在父组件中增加属性message，用v-bind的形式（简写：）进行动态绑定。
<template>
<h3>组件传递数据</h3>
<h3>parent</h3>
<Child :test="message"/>
</template>
<script >
import Child from './child.vue';
export default{
components:{
Child
},
data(){
return{
message:'动态数据传递'
}
}
}
</script>
输出效果：
组件传递多种数据类型
通过props传递数据，不仅可以传递字符串类型的数据，还可以是其他类型，例如：数字、对象、数组等，但实际上任何类型的值都可以作为props的值被传递。
父组件：动态传递String,Number,Array,Objecj类型。
<template>
<h3>组件传递数据</h3>
<h3>parent</h3>
<Child :test="message" :age='age' :names="names" :student="student"/>
</template>
<script >
import Child from './child.vue';
export default{
components:{
Child
},
data(){
return{
message:'动态数据传递',
age:20,
names:['sr','tf','lqy'],
student:{
name:'sr',
age:23
}
}
}
}
</script>
子组件：接受多种类型的数据。
<template>
<h3>child</h3>
<p>{{test}}</p>
<p>{{age}}</p>
<ul>
<li v-for="(name,index) in names" :key="index">{{name}}</li>
</ul>
<p>{{student.name}}</p>
<p>{{student.age}}</p>
</template>
<script >
export default{
data(){
return{
}
},
props:['test','age','names','student']
}
</script>
运行效果：打印这四种类型的元素。
组件传递Props校验
Vue组件可以更加细致地声明对传入的props的校验要求。对传递的数据的类型有校验。
props校验
父组件：传递一个String类型到子组件
<template>
<h3>组件传递数据</h3>
<h3>parent</h3>
<Child :test="message"/>
</template>
<script >
import Child from './child.vue';
export default{
components:{
Child
},
data(){
return{
message:'动态数据传递',
age:20,
names:['sr','tf','lqy'],
student:{
name:'sr',
age:23
}
}
}
}
</script>
子组件：对传递过来的数据要求是Number类型。
<template>
<h3>child</h3>
<p>{{test}}</p>
</template>
<script >
export default{
data(){
return{
}
},
props:{
test:{
type:Number
}
}
}
</script>
输出效果：报出警告信息。
设置默认值
子组件：接受两个值，test与age，如果父组件并没有给子组件进行传递，那么props直接给该元素赋默认值。
<template>
<h3>child</h3>
<p>{{test}}</p>
<p>{{age}}</p>
</template>
<script >
export default{
data(){
return{
}
},
props:{
test:{
type:[Number,String,Object,Array],
default:0
},
age:{
type:Number,
default:0
}
}
}
</script>
数字和字符串可以直接default，但是如果是数组或者对象，必须通过工厂函数返回默认值。
示例语法：
Names{
Type:Array,
Default(){
Return [“空”]
}
}
必选项
子组件需要的，父组件必须传值，否则会报出警告。
示例语法：
age:{
type:Number,
required:true,
default:0
}
输出结果：
Prop是只读的，我们从父组件把数据传到子组件，在子组件中，数据是不能被修改的。
组件事件
子传父：自定义事件（this.$emit）
在组建的模板表达式中，可以直接使用$emit方法触发自定义事件，触发自定义事件的目的是组件之间传递数据。
父组件：父组件通过函数接收子组件传过来的值，在函数中用元素"aaa"来接收子组件的"data"。
<template>
<h3>组件事件</h3>
<h3>parent</h3>
<Child @someEvent="getHadle"/>
<p>{{ aaa }}</p>
</template>
<script >
import Child from './child.vue';
export default{
components:{
Child
},
data(){
return{
aaa:""
}
},
methods:{
getHadle(data,message){
console.log("触发了",data),
console.log(message)
this.aaa=data
}
}
}
</script>
子组件：传了两个值，一个是静态的，一个是动态可改变的。
<template>
<h3>child</h3>
<button @click="clickEventHandle">传递数据</button>
</template>
<script >
export default{
data(){
return{
message:"child2数据"
}
},
methods:{
clickEventHandle(){
this.$emit("someEvent","child数据",this.message)
}
}
}
</script>
点击子组件的传递数据按钮时，触发clickEventHandle（）方法，将方法名，以及两个元素传递给父组件，父组件在child标签中接受并触发getHalde（）方法，获得值。
输出效果：
组件之间传递数据的方案：
父传子：使用props
子传夫：自定义事件，this.$emit(“”,””,””…)第一个是父组件接受的函数名，后面是传递的参数。
组件事件配合v-model使用（还有Watch）
简单来说就是：在组件A中输入时，在B中实时读到这个数据。
父组件
<template>
<h3>组件事件配合v-model使用</h3>
<h3>parent</h3>
<p>搜索内容为：{{message}}</p>
<Child @search="getsearch"/>
</template>
<script >
import Child from './child.vue';
export default{
components:{
Child
},
data(){
return{
message:""
}
},
methods:{
getsearch(data){
this.message=data
}
}
}
</script>
子组件
<template>
<h3>child</h3>
搜索：<input type="text" v-model="search">
</template>
<script >
export default{
data(){
return{
search:""
}
},
watch:{
search(newValue,oldValue){
this.$emit("search",newValue)
}
}
}
</script>
输出效果 ：在子组件的文本框内输入aaaaaa时，父组件的搜索内容自动更新发生变化。
