uniapp和vue组件之间的传值(父子传值,兄弟传值,跨级传值,vuex)

// 父组件
<template>
  <view>
    <view class="index-goods-list-con">
      <WaterfallList
        ref="waterFallCon"
        :status="waterfall.status"
        :list="waterfall.list"
        :reset="waterfall.reset"
        @clickCard="onClickCard"
        @handleGood="handleGood"
        @done="onDone"
      ></WaterfallList>
    </view>
  </view>
</template>
<script>
import WaterfallList from '@/components/waterfall/waterfall-list.vue'
export default {
  data() {
    return {}
  },
  methods: {
    handleDailyBestGood(e, good) {
      // 用$refs赋值调用子组件的handleDailyBestNum方法
      this.$refs.waterFallCon.handleDailyBestNum(good) 
    },
  },
}
</script>
<style></style>

// 子组件
<template></template>
<script>
export default {
  data() {
    return {
        renderBasic: ''    
    }
  },
  methods: {
     //父组件调用的方法
     handleDailyBestNum(good) {  
       //good 是父组件弹窗传递过来的值，我们可以打印看看
          console.log(good)
          this.renderBasic = good
    },
  },
}
</script>

//优惠券页面
 clickCoupon (item) {
      if (this.orderSource) {
      // 触发全局自定义事件，传参id
        uni.$emit('updateData', item.id)  
		uni.navigateBack({
		   delta: 1
		})
      }
    },

 // 从优惠券跳回下单页 
 // 监听全局自定义事件updateData，接收参数id
    uni.$on('updateData', async function (couponId) {
      that.couponId = couponId
    })

provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }

<template>
  <div>
    <button @click="changeMsg">祖组件触发</button>
    <h1>祖组件</h1>
    <parent></parent>
  </div>
</template>
<script>
import parent from './parent.vue';
export default {
  data(){
    return{
      obj:{
        name:'JavaScript',
      },
      developer:'布兰登·艾奇',
      year:1995,
      update:'2021年06月',
    }
  },
  provide(){
    return {
      obj: this.obj, // 方式1.传入一个可监听的对象
      developerFn:() => this.developer, // 方式2.通过 computed 来计算注入的值
      // developerFn: this.getDeveloper,  方式3.或者调用一个方法，也能实现响应式 
      year: this.year, // 方式4.直接传值
      app: this, // 方式5. 提供祖先组件的实例 缺点：实例上挂载很多没有必要的东西 比如：props，methods。
    }
  },
  components: {
    parent,
  },
  methods:{
    getShowCartValue() {
       return this.developer
    },
    changeMsg(){
      this.obj.name = 'Vue';
      this.developer = '尤雨溪';
      this.year = 2014;
      this.update = '2021年6月7日';
    },
  },
}
</script>

<template>
  <div class="wrap">
    <h4>子组件（只做中转）</h4>
    <child></child>
  </div>
</template>
<script>
import child from './child.vue';
export default {
  components:{
    child,
  },
}
</script>

<template>
  <div>
    <h5>孙组件</h5>
    <span>名称：{{obj.name}}</span> |
    <span>作者：{{developer}}</span> |
    <span>诞生于：{{year}}</span> |
    <span>最后更新于：{{this.app.update}}</span>
  </div>
</template>
<script>
export default {
  computed:{
    developer(){
      return this.developerFn()
    }
  },
  inject:['obj','developerFn','year','app'],
}
</script>