vue資料傳遞
阿新 • • 發佈:2021-07-08
//父元件 <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>