vue传值系列---父传子、子传父以及兄弟传值的方法

246 阅读1分钟

在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',‘参数’)//传参
    }
  }