Props
将父组件中的数据传到子组件中,在父组件中引入子组件,子组件通过props来接收
注意组件引入
父组件App.vue
<template>
<div>
我是父组件
<Son :title="myTitle"></Son>
</div>
</template>
<script>
// import 和components 引入组件
import Son from './components/Son.vue'
export default{
data(){
return{
myTitle:'vue'
}
},
components:{
Son
}
}
</script>
子组件Son.vue
<template>
<div>
我是子组件{{ title }}
</div>
</template>
<script>
export default{
//子组件通过props进行接收
props:['title']
}
</script>
$emit(自定义事件交互)
子组件数据传递给父组件。在子组件的emit中定义自定义事件,在父组件中使用然后触发父组件中定义的方法,修改myTitle的内容,最后子组件还可通过props进行接收父组件所改内容。
注意组件引入
父组件App.vue
<template>
<div>
我是父组件
<Son :title="myTitle" @changeTitle = "handlechange"></Son>
<!-- 注意changeTitle为子组件的自定义事件-->
</div>
</template>
<script>
// import 和components 引入组件
import Son from './components/Son.vue'
export default{
data(){
return{
myTitle:'vue'
}
},
methods:{
handlechange(newTitle){
this.myTitle=newTitle
},
components:{
Son
}
}
</script>
子组件Son.vue
<template>
<div>
我是子组件{{ title }}
<button @click="changeFn">修改title</button>
</div>
</template>
<script>
export default{
//子组件通过props进行接收
props:['title'],
methods:{
changeFn(){
//通过emit,向父组件发送消息通知
this.$emit('changeTitle','新的标题')//第一个引号下为自定义事件,第二个引号下为传参
}
}
}
</script>
Props校验
props的校验写法
<script>
export default{
props:{
校验属性名:{
type:Number,
required:true,
default:"默认标题"
validator(value){
//自定义校验方法
return 是否通过校验
}
}
}
}
注:当校验类型为数组时(type:Array),默认值必须采用函数的形式
default:Function(){ //大写
return【】//数组
}