封装input组件使用 v-model

最新推荐文章于 2024-06-20 19:50:45 发布

V5521

最新推荐文章于 2024-06-20 19:50:45 发布

阅读量514

点赞数

分类专栏：笔记文章标签： Vue.js 自定义组件 v-model 事件绑定组件通信

本文链接：https://blog.csdn.net/m0_57076093/article/details/119489409

版权

笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .input-large {
      height: 30px;
      font-size: 25px;
    }

    .input-small {
      height: 15px;
      font-size: 12px;
      padding: 0;
    }

  </style>
</head>
<body>
  <div id="app">
    <!-- <input type="text" v-model="msg"> -->

    <dh-input v-model="msg" size="large" placeholder="请输入内容" @focus="fh"></dh-input>
    <dh-input v-model="msg" size="small"></dh-input>
    <dh-input v-model="msg"></dh-input>

    {{msg}}
    <!-- 相当于 -->
    <!-- <dh-input :value="msg" @input="xxx"></dh-input> -->
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
  <script>
    /* 
      v-model



    */

    const DhInput = {
      // 这里的input事件，是一个自定义事件，在我们对应db-input上因为v-model的缘故，已经监听了这个事件
      template: `
        <div>
          <!-- 这个标签上的input是原生事件， $emit里的input是自定义事件 -->
          <input @focus="focusHandle($event)" @blur="blurHandle($event)" :placeholder="placeholder" :class="[size ? 'input-' + size : '']" :value="value" @input="$emit('input', $event.target.value)"/>  
        </div>
      `,
      // 自动的在组件上回去添加 value属性，就是我们对应传递过来的msg值
      props: {
        value: String,
        size: String,
        placeholder: String
      },

      methods: {
        focusHandle (e) {
          this.$emit('focus', e)
        },

        blurHandle (e) {
          this.$emit('blur', e)
        }
      }
    }

    Vue.component('DhInput', DhInput)

    const app = new Vue({
      el: "#app",

      data: {
        msg: "xxx"
      },

      methods: {
        fh () {
          console.log("获取焦点")
        }
      }
    })

  </script>
</body>
</html>

V5521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
封装input组件使用 v-model

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
复制链接

扫一扫