获取商品id

获取商品id(父子组件通信)

1.子组件

<template>
  <view class="detail">
    <view><button @click="navigator(id)">点我跳转</button></view>
  </view>
</template>

<script>
export default {
  name: 'detail',
  data() {
    return {
      id: 0
    };
  },
  created() {
    this.getGoodsDetail();//网络请求
  },
  methods: {
    async getGoodsDetail() {
      const res = await this.$getGoodsDetail();//调用全局的方法
      this.id = res.data.message.cat_id;
    },
    navigator(id) {
      console.log(id);
      this.$emit('navigator', id);//发送事件,并传递商品id
    }
  }
};
</script>
<style lang="scss" scoped></style>

2.父组件

<template>
  <view class="news">
    <view @click="callPhone">拨打电话</view>
    <detail @navigator="goDetail"></detail>
  </view>
</template>

<script>
import detail from '../../components/detail.vue';
export default {
  name: 'news',
  data() {
    return {};
  },

  components: { detail },
  methods: {
    goDetail(id) {
      console.log('我是父组件id:' + id);
      uni.navigateTo({
        url: '/pages/test/test?id=' + id
      });
    }
  }
};
</script>
<style lang="scss" scoped>
map {
  width: 100%;
  height: 400rpx;
}
</style>


posted @ 2021-02-14 22:35  Wayhome'  阅读(306)  评论(0编辑  收藏  举报
// 侧边栏目录 // https://blog-static.cnblogs.com/files/douzujun/marvin.nav.my1502.css