父组件是index.vue,子组件是addressToast.vue

  1. 父组件传递给子组件

父组件代码代码:

//  父组件import引入子组件(子组件路径要对)
import addressToast from '@/components/addressToast'
//  在component中加载组件
components: {
    addressToast
  },
 // 可以在index.vue页面使用addressToast.vue了(字母大写需要换成-符号使用)
 <address-toast v-bind:updateAddress="this.updateAddress" ></address-toast> 

以上就把父组件中定义的updateAddress对象传递给子组件了

子组件代码(接受父组件的值)

// addressToast.vue,接受index.vue传过来的updateAddress值
props: ['updateAddress'],
// prop也可以有另外一种写法,指明接受的数据类型,如String,Number等,
// 像props:{message:{type: String,require:true}},如果是数组或者json对象还需要默认一个返回函数

子组件可以使用updateAddress这个值了

  1. 子组件传递给父组件
    子组件中定义了info对象,在需要的地方使用emit传值就行,比如addressToast组件中有个fun方法
 fun () {
      this.$emit('info','我是子组件传递给父组件的值')
      }

父组件监听这个事件,父组件使用子组件改为

// 父组件代码
<address-toast @info="show" v-bind:updateAddress="this.updateAddress" ></address-toast> 
// 父组件show方法
show(data){
console.log(date)
}
// data是传递过来的值
Logo

前往低代码交流专区

更多推荐