uni-app 組件間數據傳遞

 

//父組件
<template>
　　<Product-list @son-fun（子組件中定義的$emit方法名，用來接收子組件中傳遞來的數據）='goDetil' :goods(子組件props內的goods)='goods(父組件要傳遞的數據)'></Product-list>
</template>
<script>
　　import ProductList from '../../components/Product_information_list.vue'　　//引入子組件
　　export default {
　　　　data(){
　　　　　　return{
　　　　　　　　goods:[xxx]
　　　　　　}
　　　　},
　　　　components: {
            'Product-list': ProductList　　　　//注冊子組件
        },
　　　　methods:{
　　　　　　goDetil(id) {
                uni.navigateTo({　　　　　　//使用navigateTo方法跳轉到其他組件，並用url傳遞數據
                    url: '/pages/goods_detail/goods_detail?id=' + id
                })
            }
　　　　}
　　}
</script>

 

 

//子組件
<template>
    <div @click='navigator(goods.id)'>{{goods（props內的goods，父組件傳遞來的數據）}}</div>
</template>
<script>
    export default {
        props:['goods'],
        data() {
            return {
            };
        },
        mounted() {
　　　　　　navigator(id){　　　　//通過this.$emit方法向父組件傳遞數據
                this.$emit('son-fun',id)
            }
        },
        methods:{
           
        }
    }
</script>