vue手机号修改组件

最新推荐文章于 2024-07-30 12:20:13 发布

住汪星球的喵星人

最新推荐文章于 2024-07-30 12:20:13 发布

阅读量662

点赞数 1

本文链接：https://blog.csdn.net/weixin_43117402/article/details/105661609

版权

本文介绍了如何在Vue项目中创建一个手机号修改组件，通过父子组件交互实现功能。首先在父组件App.vue中引入子组件Modal.vue，然后在适当的位置触发子组件的显示，最后展示子组件如何接收并处理来自父组件的参数。

摘要由CSDN通过智能技术生成

父App.vue

<template>
  <div id="app">
    <!-- 使用组件 Modal 用修饰符将 visible 进行”双向绑定“ -->
    <Modal ref="mobileModal" :visible.sync="visible" @confirm="confirm"></Modal>
    <button @click="showModal">打开修改手机号的弹框</button>
  </div>
</template>

<script>
// 引入组件
import Modal from '@/components/Modal.vue';

export default {
   
  name: 'app',
  // 注册组件
  components: {
   
    Modal
  },
  data: function() {
   
    return {
   
      visible: false
    };
  },
  methods: {
   
    // 自定义函数 confirm
    confirm() {
   
      console.log('confirm');
    },
    showModal() {
   
      this.visible = true
      // 提示：$nextTick 可以确保 Modal 渲染后再执行里面的函数
      this.$nextTick(() => {
   
        this.$refs.mobileModal.focus();
      })
    }
  }
};
</script>

<style lang="scss">
#app {
   
  width: 100%;
  height: 100%;
}
</style>

子Modal.vue

<template>
  <div class="modal" v-if="visible">
    <div class="modal-content">
      <div class="modal-header">
        <div class="title">修改手机号</div>
        <button class="btn-close" @click