一、单文件组件
(1)三个部分组成
1、Template
只能存在一个根元素
2、Script
3、Style
scoped:样式只在当前组件内生效
(2)子父级组件交互(通信)
父->子 :props
案例:
这个是父组件
<template>
<div>
Parent
<Son title="传递数据" />
</div>
</template>
<script>
import Son from "./son"
export default {
name: "mc",
data() {
return {
}
},
components: {
Son
}
}
</script>
<<style scoped>
</style>
这个是子组件
<template>
<div>
Child:{{title}}
</div>
</template>
<script>
export default {
name: "son",
data() {
return {
}
},
props: ["title"]
}
</script>
<style scoped>
</style>
效果图:
动态props:
这是父组件
<template>
<div>
Parent
<input type="text" v-model="lifemsg">
<Son title="传递数据" :lifemsg="lifemsg"/>
</div>
</template>
<script>
import Son from "./son"
export default {
name: "mc",
data() {
return {
lifemsg:""
}
},
components: {
Son
}
}
</script>
<<style scoped>
</style>
这是子组件
<template>
<div>
Child:{{title}}-{{lifemsg}}
</div>
</template>
<script>
export default {
name: "son",
data() {
return {
}
},
props: ["title","lifemsg"]
}
</script>
<style scoped>
</style>
子->父 :emit Event
在vue中,父子组件关系可以总结为prop向下传递,事件向上传递。父组件通过prop给子组件下发数据,子组件通过事件给父组件发送消息,看看他们是怎么工作的。
数据传递类型限制(验证)
我们可以为组件的 prop 指定需求。如果有一个需求没有被满足,则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。
为了定制 prop 的验证方式,你可以为 props
中的值提供一个带有验证需求的对象,而不是一个字符串数组。例如:
数据类型验证
多数据类型验证
必选项
默认值
obj、arr数据类型的默认值
<template>
<div>
Parent
<Son :title="msg" :lifemsg="lifemsg" :num="num" :objdata="myobj"/>
</div>
</template>
<script>
import Son from "./son"
export default {
name: "mc",
data() {
return {
msg:"我是活的数据",
lifemsg:"hello",
num:10,
myobj:{
name:"frack",
age:20
}
}
},
components: {
Son
}
}
</script>
<<style scoped>
</style>
<template>
<div>
Child:{{ title }}-{{lifemsg}}-{{num*2}}-{{objdata.name}}
</div>
</template>
<script>
export default {
name: "son",
data() {
return {
}
},
props: {
//多个可能的类型
title: [String, Number],
//必填的字符串
lifemsg: {
type: String,
required: true
},
//带有默认的数字
num:{
type:Number,
default:5
},
//带有默认值的对象
objdata: {
type: Object,
//对象或者数组一定会从一个工厂函数返回默认值
default: function() {
return {
name: "未知",
age: 10
}
}
}
}
}
</script>
<style scoped>
</style>
当 prop 验证失败的时候,(开发环境构建版本的) Vue 将会产生一个控制台的警告。