一:父组件如何传值给子组件
问题一:
如何把父组件中的msg
传递给子组件?
解决方法:
父组件传值给子组件使用的是属性传值方式。子组件中的
props
选项是用来接收父组件传来的数据。
1.在子组件中使用props
选项接收父组件的值。
let son={
template:'#test',
props:['msg2']
}
props
对应的值可以是数组也可以是对象,这里使用数组的方式定义变量。
2…在子组件中使用v-bind
指令作为父子之间变量的传递桥梁。
<son :msg2=msg></son>
:
是v-bind
的缩写,使用msg2
变量接收msg
的值。
问题二:
父组件如何传递多个数据
props使用数组的方式进行接收即可,如
[‘msg1’,‘msg2’,‘msg3’]
问题三:
如何对父组件传递过来的数据进行类型检查
props
可以使用对象的方式可以限制传递过来的数据类型等。
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true // 必须要传递,否则控制台会显示错误
},
// 带有默认值的数字
propD: {
type: Number,
default: 100 // 默认值是100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return { message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator:function(value){
return value>10 // 符合条件才返回
}
}
二:子组件如何传值给父组件
子组件要传值给父组件,需要借助事件绑定方式
@
进行传递
1.给子组件对应的元素绑定一个事件
<template id="test">
<div>
<button @click="handleSend"> click me</button>
</div>
</template>
- 使用
$emit
给父组件发射数据
methods:{
handleSend:function(){
this.$emit('xx',this.sonData)
}
}
在
$emit
方法中传入一些参数,第一个参数是用来关联父组件中定义的函数,第二个参数是需要传递的数据。
3.使用@
关联父组件中定义的函数
<son @xx='handleClick'></son>
xx
是$emit
定义的函数名,handleClick
是父组件中定义的函数,用来接收数据的。
4.在父组件定义handleClick
方法。
methods:{
handleClick:function(){
console.log("事件触发了");
}
}