uniapp 組件傳參

2019 年 11 月 7 日
筆記

父組件

<v-sub @returnDate=returnDate :backGround=backGround></v-sub>    import vSub from "../../../components/v-sub.vue"      export default {          components:{              vSub          },          data() {              return {                  backGround:"#000"              }          },          methods: {              returnDate(e){                  console.log("接收到的值==>>"+e)              }          }      }

<device ref="device" :stoId="storeId" v-show="active == 'device'">          </device>          <battery ref="battery" :stoId="storeId" v-show="active == 'battery'">          </battery>    import device from './components/device.vue'      import battery from './components/battery.vue'      export default {          components: {              device,              battery          },          data() {              return {                  storeId: null, // 參數storeId                  active: 'device' // 切換tab              }          },

子組件

<template>      <view class="content" :style="[{background:backGround}]">          <button @tap="passValue">點擊傳值</button>      </view>  </template>    <script>      export default {          props:{              backGround:{                  type:String,                  default:"#fff"              }          },          methods:{              passValue(){                  this.$emit("returnDate","yoyoyo")              }          }      }  </script>    <style>      .content{          width: 400upx;          height: 400upx;      }  </style>

子類接收父類的數據,就會用到props