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接收即可。