vue组件之间传参有三种传参方式'父传子','子传父','非父子组件之间传值'
父传子
- 父组件
<template>
<CounterCom :num="5"></CounterCom>
</template>
<script>
import CounterCom from './components/CounterCom.vue'
export default{
components:{CounterCom}, // 引用组件
data(){
return{
msg:"vue-脚手架写大项目",
}
}
}
</script>
<style scoped>
</style>
- 子组件
<template>
<div>{{num}}<div>
</template>
<script>
export default{
props:{
"num":{
type: Number,
default:1
},
"age":{
type: Number,
required:true
}
},
}
</script>
<style scoped>
</style>
-
type: 子组件接收的值可以为Number、String、Boolen、Array、Object、Function,也可以接收多种类型值如: [Number,String]
-
default:
1.default定义默认值,如果父组件有传值,则用父值渲染。如果父组件没有传值,则使用默认值
2.父子组件传值时default不能直接定义成空数组或空对象,需要用工厂函数return返回一个默认值
<script>
export default{
props:{
num :{
type: Array,
default: function () {
return {}
}
},
changePage: {
type: Array,
default: () => {}
}
},
}
</script>
-
required: required为true时定义为必传项,
-
自定义验证函数
为 props 属性指定 自定义的验证函数 ,从而 对 prop 属性的值进行更加精确的控制
export default {
props : {
D : {
fun(value) {
//这个函数表示:D必须匹配'aa','bb','cc'里其中一个
//fun函数返回为true表示验证通过,false则表示验证失败
return ['aa','bb','cc'].indexOf(value) !== -1
}
},
},
}
子组件传父组件
- 子组件
<template>
<div>
<h2>{{name}}</h2>
<h2>{{age}}</h2>
<button @click="giveName">点我传递姓名</button>
</div>
</template>
<script>
export default {
name:'Student',
props:['receive'],
data(){
return{
name:'张三',
age:18
}
},
methods:{
giveName(){
// 调用自定义事件,传入参数
this.$emit('getName',this.name)
}
}
}
</script>
- 父组件
<template>
<CounterCom @getName= ""></CounterCom>
</template>
<script>
import CounterCom from './components/CounterCom.vue'
export default{
components:{CounterCom}, // 引用组件
data(){
return{
name: ""
}
},
methods:{
giveName(e){
this.name = e
}
}
}
</script>
总结: 子传父主要通过 this.$emit()方法传值,其中有两个参数,第参数一个为传递事件名称,第二个为传递的参数,父组件通过v-bind事件接收子组件传递过来的值
非父子组件之间传值
非父子组件之间传值,需要定义个公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果。
bus文件可以理解为组件A和B的父组件,组件A注册一个事件上浮给bus文件,组件B在bus文件下监听事件
// bus.js
import Vue from 'vue'
export default new Vue()
<template>
<div>
A组件:
<span>{{elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
import Bus from './bus'
export default {
name: 'ChildInfo',
data () {
return {
elementValue: 10
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
<style scoped>
</style>
<template>
<div>
B组件:
<span>{{elementValue}}</span>
</div>
</template>
<script>
import Bus from './bus'
export default {
name: 'ChildInfo2',
data () {
return {
elementValue: 0
}
},
mounted: function () {
var that = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
that.elementValue = data
})
},
methods: {
}
}
</script>
<style scoped>
</style>
vue中非父子组件之间通信除了使用bus总线,也可以使用vuex,两者适用场景不同。
bus适合小项目、数据被更少组件使用的项目,对于中大型项目 数据在很多组件之间使用的情况 bus就不太适用了。bus其实就是一个发布订阅模式,利用vue的自定义事件机制,在触发的地方通过$emit向外发布一个事件,在需要监听的页面,通过$on监听事件。
标签:传参,vue,default,bus,export,组件,传值 From: https://www.cnblogs.com/Alangc612/p/16935355.html