👏作者简介：大家好，我是小童，Java开发工程师，博客博主，Java领域新星创作者
📕系列专栏：前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶
📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦
🍂博主正在努力完成2023计划中：以梦为马，扬帆起航，2023追梦人
组件传递数据_Props
组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的
传递数据的解决方案就是 props
<template>
<h3>ComponentA</h3>
<ComponentB title="传递数据"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
components:{
ComponentB
}
}
</script><template>
<h3>ComponentB</h3>
<p>{{ title }}</p>
</template>
<script>
export default {
props:["title"]
}
</script>动态数据传递
<template>
<h3>ComponentA</h3>
<ComponentB :title="message"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
message:"动态数据"
}
},
components:{
ComponentB
}
}
</script>注意事项：
props
实时效果反馈
1. 下列实现组件之间传递数据，接受数据组件的中的关键字是：
A data
B methods
C watch
D props
组件传递多种数据类型
通过 props
但实际上任何类型的值都可以作为 props 的值被传递
Number
<template>
<h3>ComponentA</h3>
<ComponentB :age="age"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
age:20
}
},
components:{
ComponentB
}
}
</script><template>
<h3>ComponentB</h3>
<p>{{ age }}</p>
</template>
<script>
export default {
props:["age"]
}
</script>Array
<template>
<h3>ComponentA</h3>
<ComponentB :names="names"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
names:["iwen","ime","frank"]
}
},
components:{
ComponentB
}
}
</script><template>
<h3>ComponentB</h3>
<p v-for="(item,index) of names" :key="index">{{ item }}</p>
</template>
<script>
export default {
props:["names"]
}
</script>Object
<template>
<h3>ComponentA</h3>
<ComponentB :userInfo="userInfo"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
userInfo:{
name:"iwen",
age:20
}
}
},
components:{
ComponentB
}
}
</script><template>
<h3>ComponentB</h3>
<p>{{ userInfo.name }}</p>
<p>{{ userInfo.age }}</p>
</template>
<script>
export default {
props:["userInfo"]
}
</script>实时效果反馈
1. props
A 只能接受字符串类型
B 只能接受数组类型
C 只能接受对象类型
D 任何类型
组件传递Props效验
Vue 组件可以更细致地声明对传入的 props 的校验要求
<template>
<h3>ComponentA</h3>
<ComponentB title="Props效验" :userInfo="userInfo"/>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
userInfo:{
name:"iwen",
age:20
}
}
},
components:{
ComponentB
}
}
</script><template>
<h3>ComponentB</h3>
<p>{{ title }}</p>
<p>{{ userInfo.name }}</p>
<p>{{ userInfo.age }}</p>
</template>
<script>
export default {
props:{
title:{
type:String
},
userInfo:{
type:Object
}
}
}
</script>默认值
<template>
<h3>ComponentB</h3>
<p>{{ title }}</p>
<p>{{ userInfo.name }}</p>
<p>{{ userInfo.age }}</p>
<p>{{ age }}</p>
</template>
<script>
export default {
props:{
title:{
type:String
},
userInfo:{
type:Object,
default(){
return {}
}
},
age:{
type:Number,
default:20
}
}
}
</script>必选项
<template>
<h3>ComponentB</h3>
<p>{{ title }}</p>
<p>{{ userInfo.name }}</p>
<p>{{ userInfo.age }}</p>
<p>{{ age }}</p>
</template>
<script>
export default {
props:{
title:{
type:String,
required:true
},
userInfo:{
type:Object,
// 对象或者数组应当用工厂函数返回
default(){
return {}
}
},
age:{
type:Number,
default:20
}
}
}
</script>温馨提示
警告！prop 是只读的！
<template>
<h3>ComponentB</h3>
<p>{{ title }}</p>
<button @click="updateHandle">修改数据</button>
</template>
<script>
export default {
props:{
title:{
type:String,
required:true
}
},
updateHandle(){
// 警告！prop 是只读的！
this.title = "不允许修改"
}
}
</script>实时效果反馈
1. props 传递数据，下列那个是效验 props 的必选项：
A default
B type
C
D props
组件事件
在组件的模板表达式中，可以直接使用 $emit 方法触发自定义事件 触发自定义事件的目的是组件之间传递数据
<template>
<h3>ComponentA</h3>
<ComponentB @some-event="getHandle"/>
<p>ComponentA接受的数据：{{ message }}</p>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data(){
return{
message:""
}
},
components:{
ComponentB
},
methods:{
getHandle(data){
this.message = data;
}
}
}
</script><template>
<h3>ComponentB</h3>
<button @click="sendHandle">发送数据
</button>
</template>
<script>
export default {
methods: {
sendHandle() {
this.$emit("someEvent", "ComponentB的数据")
}
}
}
</script>温馨提示
组件之间传递数据的方案：
1 父传子： props
2 子传父： 自定义事件(this.$emit)
实时效果反馈
1. 下列那个是自定义事件组件传递数据的关键字：
A props
B data
C $emit
D event
组件事件配合 v-model 使用
如果是用户输入，我们希望在获取数据的同时发送数据配合 v-model 来使用
<template>
<div>
<h3>ComponentA</h3>
<ComponentB @some-event="getHandle"/>
<p>ComponentA接受的数据：{{ message }}</p>
</div>
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
data() {
return {
message: ""
}
},
components: {
ComponentB
},
methods: {
getHandle(data) {
this.message = data;
}
}
}
</script><template>
<div>
<h3>ComponentB</h3>
<input v-model="searchText" />
</div>
</template>
<script>
export default {
data() {
return {
searchText: ""
}
},
watch: {
searchText(newValue, oldValue) {
this.$emit("someEvent", newValue)
}
}
}
</script>组件数据传递
我们之前讲解过了组件之间的数据传递， props 和 自定义事件两种方式
1 props
2 自定义事件 : 子传父
出了上述的方案， props
<template>
<Child :onFnEvent="fn" />
<p>{{ message }}</p>
</template>
<script>
import Child from "./components/Child.vue"
export default {
data() {
return {
message:""
}
},
methods: {
fn(data) {
this.message = data
}
},
components: {
Child
}
}
</script><template>
<h3>组件传递数据</h3>
<p>{{ onFnEvent('测试数据') }}</p>
</template>
<script>
export default {
props:{
onFnEvent:{
type:Function
}
}
}
</script>透传 Attributes
“透传 attribute”指的是传递给一个组件，却没有被该组件声明为 props 或 emits 的 attribute 或者 v-on 事件监听器。最常见的例子就是 class 、 style 和 id
当一个组件以单个元素为根作渲染时，透传的 attribute 会自动被添加到根元素上
<template>
<h3>ComponentA</h3>
<ComponentB class="component-b" />
</template>
<script>
import ComponentB from "./ComponentB.vue"
export default {
components: {
ComponentB
}
}
</script><template>
<h3>ComponentB</h3>
</template>
<style>
.component-b{
color: red;
}
</style>禁用 Attributes 继承
<template>
<h3>ComponentB</h3>
</template>
<script>
export default {
inheritAttrs:false
}
</script>
<style>
.component-b{
color: red;
}
</style>
