目录
引言
组件传递参数_Props
静态数据的传递
动态数据的传递
组件传递多种数据类型
组件传递Props校验
props校验
设置默认值
必选项
组件事件
组件事件配合v-model使用（还有Watch）
引言
这一篇文章主要是叙述一下父子组件之间的传值方式，以及对所传值的要求。
组件传递参数_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时，父组件的搜索内容自动更新发生变化。
