1.父组件向子组件传值
父组件向子组件传值,我们要在子组件中设置好接收的值是怎么样的。假如有一个my-component
的组件,我们可以在子组件中添加props
属性,可以写成数组的形式,一般我们写成对象的形式,这样可以做类型检查和其他配置,例如:
props: {
multiple: {
type: Boolean,
default: false
},
title: {
type: String,
required: true
}
},
my-component
接收multiple
和title
两个属性,multiple
的类型为Boolean
,默认为false,title
的类型为String
,这个属性必须。我们还可以给title
添加自定义的验证函数,例如:
title: {
validator: function(value) {
// 这里添加验证逻辑
return ...
}
}
这也是UI框架中的UI组件验证值的方式,有时间我们可以尝试自己封装一个UI组件。
写完子组件要接收的值的类型和配置,我们直接在父组件中绑定传值就可以了,例如:
<my-component :title="Hello"></my-component>
2.子组件向父组件传值
子组件主要是通过触发事件传值
this.$emit('sendSomething', 'helllo')
这样就触发了sendSomething
事件,传递了hello
这个值,接下来我们在父组件中监听这个事件
<my-component @sendSomething='doSomething'></my-component>
doSomething(value) {
...
}