网站如何做sem优化,优设网下载,设计logo网站免,网上推广培训Vue面试之组件通信的方式总结 props父子组件传参props父组件向子组件传参数组形式对象的简单形式对象的复杂形式 props子组件向父组件传参通过传递方法的形式通过传递事件的形式 插槽默认插槽具名插槽作用域插槽 最近在整理一些前端面试中经常被问到的问题#xff0c;分为vue相… Vue面试之组件通信的方式总结 props父子组件传参props父组件向子组件传参数组形式对象的简单形式对象的复杂形式 props子组件向父组件传参通过传递方法的形式通过传递事件的形式 插槽默认插槽具名插槽作用域插槽 最近在整理一些前端面试中经常被问到的问题分为vue相关、react相关、js相关、react相关等等专题可持续关注后续内容会不断进行整理~ 在Vue框架中提供了多种组件通信方式props父子组件传参、插槽传参、Event Bus方式、vuex方式传参等本篇先对前两种方法进行总结~
props父子组件传参
props父组件向子组件传参
props算是vue中比较简单的语法通过在标签中定义属性的方式实现父组件对子组件的信息传递关于传参的限定有三种方式 需要注意的是props是单向数据流传递因此对接收到的props只是使用不能修改
数组形式
该方式是最为简单的方式只需在接收prop的组件中以数组的形式备案要使用的props参数名即可如下示例
export default {name: xxx,props: [name, age, sex]
}对象的简单形式
如果想要指定接收props参数的类型可通过此种方式进行简单限定如
export default {name: xxx,props: {name: String,age: Number,sex: String}
}对象的复杂形式
如果还要对参数进行进一步的限制如是否必输、默认值等可采用此种方式进行限定
export default {name: xxx,props: {name: {type: String,required: false,default: 小红},age: {type: Number,required: true,default: 12},sex: {type: String,required: false}}
}如果传递prop时没有满足对应限制则会在控制台上报错。
props子组件向父组件传参
props也可实现子组件向父组件传递数据即利用父组件向子组件传递事件/方法的形式通过这种方式在子组件使用父组件传过来的方法时就可利用参数传递的方式将参数传递给父组件真是妙~
通过传递方法的形式
/* parent组件 * /
Son :somethingdoSomething/Son // 将doSomething方法进行传递export default {name: Parent,components: {Son,},methods: {doSomething(name) {console.log(name, 这就是由子组件传递过来的name值);},},
};// Son组件
templatebutton clickdo点击触发方法/button
/template
script
import Son from ./Son.vue;
export default {name: Son,props: [something]
}
do() {this.something(小明) // 将子组件的参数传递给父组件
}
/script通过传递事件的形式
上述方法也可以通过$emit方法来调用父组件方法从而将子组件参数传递给父组件修改如下
// 父组件
templateSon doSomethingsomething/Son
/template
script
import Son from ./Son.vue;export default {name: Parent,components: {Son}methods: {something(params) {console.log(拿到子组件传递过来的参数, params)}}}
/script// 子组件
templateButton clickdo/Button
/template
scriptexport default {name: Son,methods: {do() {this.$emit(doSomething, 小红) // 触发父组件的doSomething事件并将小红传递出去}}}
/script插槽
Vue提供了插槽机制所谓插槽是指我现在这块地方要写一些内容但是内容还不确定因此我在此处用插槽占上位置等后续在别处补充好了内容就可以在此处展现出来效果。插槽用slot标签表示有默认插槽、具名插槽以及作用域插槽三种而插槽的内容要写在组件标签之间如
A此处即为插槽内容/A插槽的官方说法如下 插槽作为组件的内容分发出口。它允许在父组件中将任意子组件的内容“插入”到组件模板中的特定位置以便在不同的场景下展示不同的内容。插槽提供了一种灵活的方式来组合父组件和子组件的内容并允许创建更灵活、可复用的组件。 默认插槽
默认插槽是最简单的一种形如
slotslottemplatediv这是Parent组件/divSon插槽内容/Son
/template
script
import Son from ./Son.vue;export default {name: Parent,components: {B}...}
/scripttemplatediv这是Son组件/divslot/slot // 插槽中的内容就会替换到这里
/template
scriptexport default {name: Son,...}
/script具名插槽
见名之意就是为不同插槽起不同的名字用于区分不同插槽通过在slot标签中设置name属性即可
templateheaderslot nameheader/slot/headermainslot namemain/slot/mainfooterslot namefooter/slot/footer
/template在向具名插槽提供内容时可通过template标签设置slot指令指定其名称如
templatediv这是Parent组件/divSontemplate slotheader这是标题内容...../templatetemplate slotmain这是主要内容...../templatetemplate slotfooter这是底部内容...../template/Son
/template
scriptexport default {name: Parent,components: {B}...}
/script作用域插槽
如果想要将父组件访问子组件数据此时可以使用作用域插槽方法简单来说就是在子组件slot标签上定义要传递的参数prop这样在父组件中就可以通过slot-scope属性定义
作用域插槽或称为具名插槽的插槽内容作用域允许子组件将数据传递给父组件并且在父组件中可以直接访问和使用这些数据。
// Son组件
templatedivdivson组件/divslot :objobj/slot // 利用prop将obj数据传出去/div
/template// Parent组件
templatedivdivparent组件/divtemplate slot-scopedata{{data.obj}} // 这里就可以拿到传递过来的数据objdata可以随便定义/template/div
/template以上示例皆是基于Vue2版本在Vue3中使用v-slot代替了slot-scope在使用具名插槽和作用域插槽时要注意区分~
