vue2基础系列教程之v-model及面试高频问题

v-model是表单组件里面的核心知识点,这个指令给我们写表单业务带来了很大的方便。

  • 元素标签上的 v-model 指令用于双向绑定数据,它是一个语法糖,可以用于代替 v-bind:value@input

    • 例如:<input v-model="message" placeholder="edit me">
    • 相当于:<input :value="message" @input="message = $event.target.value">
  • 组件上的 v-model 指令默认会使用 value 属性与组件数据双向绑定,可以通过 model 选项来更改

一般使用

js 复制代码
const inputTemplate = `
          <input :placeholder="message" v-bind:value="value" @input="updateValue" />`;
Vue.component("custom-input", {
  template: inputTemplate,
  props: ["value", "message"],
  methods: {
    updateValue(e) {
      this.$emit("input", e.target.value);
    },
  },
});

var app = new Vue({
  el: "#app",
  data() {
    return {
      message: "",
      username: "",
    };
  },
  methods: {
    onFocus() {
      this.message = "输入框被点击了";
    },
    onBlur() {
      this.message = "";
    },
  },
});
html 复制代码
<div id="app">
  <h3>{{username}}</h3>
  <custom-input v-model="username" :placeholder="message" />
</div>

自定义组件绑定原生事件

根据 vue 的设计理念,自定义组件上的属性和事件,会默认绑定到组件的根元素上,如果想要绑定到组件的原生事件上,需要使用 .native 修饰符。

也就是我们在组件内部不使用 props 进行显示的接受,这些属性和事件会默认的绑定到组件的根元素上。 @focus.native="onFocus" @blur.native="onBlur" class="custom-input" 这三个属性我在组件内部没有使用 props 进行接受,但是却可以正常的使用。

html 复制代码
<div id="app">
  <h3>{{username}}</h3>
  <custom-input
    class="custom-input"
    v-model="username"
    :placeholder="message"
    @focus.native="onFocus"
    @blur.native="onBlur"
  />
</div>
js 复制代码
const inputTemplate = `
          <input :placeholder="message" v-bind:value="value" @input="updateValue" />`;
Vue.component("custom-input", {
  template: inputTemplate,
  props: ["value", "message"],
  methods: {
    updateValue(e) {
      this.$emit("input", e.target.value);
    },
  },
});

var app = new Vue({
  el: "#app",
  data() {
    return {
      message: "请输入要显示的文字",
      username: "",
    };
  },
  methods: {
    onFocus() {
      this.message = "输入框被点击了";
    },
    onBlur() {
      this.message = "";
    },
  },
});

关于inheritAttrs

在 vue2.4 版本中,新增了 inheritAttrs 选项,默认情况下,组件上没有在 props 中声明的属性会被添加到组件的根元素上。

有时候,我们不希望这些属性添加到组件的根元素上,可以通过设置 inheritAttrs: false 来关闭这个功能。

同时,改造下inputTemplate

这时候,我们发现focusblur事件失效了,没有报错,就是没有触发。

这种情况,就需要我们手动来处理了,原因就是上面的原理

js 复制代码
const inputTemplate = `
          <label>{{label}}
            <input  :placeholder="placeholder" :value="value" @input="updateValue" v-on="customListeners"/>
          </label>`;
Vue.component("custom-input", {
  inheritAttrs: false,
  template: inputTemplate,
  props: ["value", "placeholder", "label"],
  methods: {
    updateValue(e) {
      this.$emit("input", e.target.value);
    },
  },
  computed: {
    customListeners() {
      var vm = this;
      console.log("🚀 ~ customListeners ~ this.$listeners:", this.$listeners);
      return Object.assign({}, this.$listeners, {
        input: (e) => {
          vm.$emit("input", e.target.value);
        },
      });
    },
  },
});

var app = new Vue({
  el: "#app",
  data() {
    return {
      message: "请输入要显示的文字",
      username: "",
      label: "账号:",
    };
  },
  methods: {
    onFocus() {
      this.message = "输入框被点击了";
    },
    onBlur() {
      this.message = "";
    },
  },
});
html 复制代码
<div id="app">
     <h3> {{username}}</h3>
      <custom-input class="custom-input" v-model="username" :placeholder="message" @focus="onFocus" @blur="onBlur" :label="label"/>
</div>

注意这里@focus="onFocus" @blur="onBlur",要去掉.native,不然也不生效

相关推荐
Summer不秃3 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰7 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye13 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm16 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x42 分钟前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚44 分钟前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You1 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生1 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互
baiduopenmap2 小时前
百度世界2024精选公开课:基于地图智能体的导航出行AI应用创新实践
前端·人工智能·百度地图