1. 程式人生 > 其它 >vue資料傳遞

vue資料傳遞

//父元件
<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>