vue 封装公共组件

vue 封装公共组件

使用 vant 组件库封装可复用组件，主要展示Dialog 弹出框。
此只使用父子传值方法，也可使用 vuex 等。

• 达成目标：
  父组件点击按钮触发子组件功能（可复用）。
• 需求：
  1. 可自由传值。
  2. 需要避免子组件直接更改父组件状态造成报错。
• 思路：
  因封装组件为弹框，可默认子组件为显示状态，父组件通过 v-if 来判断是否需要显示隐藏，子组件点击事件可通过$emit方法传值给父组件，通过自定义方法来进行显示隐藏等。

父组件

<template><submitHint v-if="hintType" @closeHintText="theHintText" />
</template><script>// 引用子组件路径import submitHint from "../forgetPwdHint";export default {components: {submitHint,},data() {return {// 是否需要显示组件hintType: false,};},methods: {theHintText() {this.hintType = !this.hintType;},},}</script>

子组件

<template><div class="pwdHint"><van-popup v-model="hintshow" :close-on-click-overlay="false"><div class="title">收不到短信验证码</div><div class="btn gray_w" @click="theTypeShow">我知道了</div></van-popup></div>
</template><script>
export default {data() {return {// 默认弹出框一直显示hintshow: true,};},methods: {// 点击事件时传值给父组件更改显示隐藏theTypeShow() {this.$emit("closeHintText", false);},},
};
</script>

如此组件简单封装完成，如需父子传值，在引用的子组件上动态绑定子组件的参数名，在子组件通过props接收即可。