获取商品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>
注:以上内容仅用于日常学习