在vue中,最长用的到就是组件之间的相互传值,比如你封装好了一个按钮组件,将其引用到父组件中使用,父子组件中,相应的值或者方法就需要互相传递,而同一个父组件下的两个子组件,就是兄弟组件。
首先,父组件通过使用“import” 引入相应子组件
子组件给父组件传值,
//在子组件中,需要传值的地方写入(js部分写入)
` methos(){
this.$emit('自己取的名字selfName',要传的值res.val)
} `
在父组件使用的子组件的地方(标签),写入刚刚在父组件中取的名字 @selfName1可以不与传值的名字一样,随便写(@a或者@b都可以)
` <son @selfName1="selfName"><son>`
父组件给子组件传值(布尔值):
示例: 要传的是一个布尔,在Data中声明这个值, isShow:false 在父组件使用子组件的地方(标签)中写入
`
<son :isShow1="isShow"></son>
`
在子组件中,与data平级的位置,写入
data(){}, props:{ isShow1:{ title:Boolean,//值的类型 default:false//默认值(状态) } }
如果传值为数组(父组件写法格式与布尔值一致)
在子组件中:
data(){}, props:{ isShow1:{ default:()=>{ return }, type:Array } }
兄弟组件传值
首先创建一个Vue实例(js文件),在文件中引入Vue
`
import Vue from 'vue';
export default new Vue();
`
b.vue传值给a.vue,在a.vue中引入Bus文件。
import import Bus from '@/libs/bus.js' //from的是Bus文件的路径
在a.vue组件中调用Bus中的方法,
Bus.$emit('selectionSampleList', this.selection)
b.vue中
//销毁
` beforeDestroy(){
Bus.$off('selectionSampleList')
},
activated () {
Bus.$on('selectionSampleList', (e) => {
this.$refs['sampleDetail'].init(e)
})
},
`
b.vue传方法给a.vue
b.vue
`import Bus from '@/libs/bus.js'
mounted(){
Bus.$on('saveFun',this.saveFun)
},
//销毁
beforeDestroy(){
Bus.$off('saveFun')
},
methods:{
saveFun(){
console.log('123)
}
}`
a.vue
methods:{
btnFun(){
//调用方法
Bus.$emit('saveFun')//不传参
Bus.$emit('saveFun',‘参数’)//传参
}
}