[JavaScript知识库]vue 封装组件

//父组件
<shipNameDia
  :showDia="showDia"
  :urlHasShipInfo="urlHasShipInfo"
  :shipInfo="shipInfo"
  @handleBtnClick="btnClick"
></shipNameDia>

import shipNameDia from "@/components/shipNameDia";

export default {
  components: {
    shipNameDia,
  },
  data() {
    return {
    	showDia: false,
    	urlHasShipInfo: false,
    	shipInfo: {
        	name: "",
        	numList: [],
      	},
    },
    methods: {
    	btnClick(val, selectedText) {
    		console.log('111')
    	}
    }
  }

//子组件
<template>
	<van-dialog v-model="showDia">
		<div @click="handleBtnClick(1)">
			我是子组件：{{selectedText}}
		</div>
		<div v-show="urlHasShipInfo">{{ shipInfo.name }}</div>
	</van-dialog>
</template>

export default {
  props: {
    showDia: {
      type: Boolean,
      default: false,
    },
    urlHasShipInfo: {
      type: Boolean,
      default: false,
    },
    shipInfo: {
        type: Object,
        default: () => {
        	return null
      	}
    },
    targetCoord: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      selectedText: "浙龙港渔",
    };
  },
  methods: {
    handleBtnClick(val) {
        this.$emit('handleBtnClick', val, this.selectedText)
    }
  },
};

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖